28172 sujets

CSS et mise en forme, CSS3

Problème d'affichage des sous-menus

Bonsoir chers amis je suis entrain de faire un site en html5/css3 mais j'ai un problème pour afficher correctement mon menu déroulant et je ne sais vraiment pas ou se trouve le problème. Votre aide me sera précieuse. Voici mon bout de code, merci de me corriger si possible.

Menu:

<!DOCTYPE html lang="fr">
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="generator" content="Sublime Text 2" />
		<meta name="author" content="MaNO" />
		<title></title>
		<link href="css/design.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
  </head>
	
  <body>
    <div id="content">
      <div id="top">
        <div id="top_ban">
          <h1>ACADEMIE DE FORMATION</h1>
        </div>
      </div>

      <div id="menu">
        <ul class="sf-menu" id="nav">
              <li><a href="index.php">Accueil</a></li>
              <li><a href="#">Item1</a>
                <ul>
                  <li><a href="#">Item2</a></li>
                  <li><a href="#">Item2</a>
                    <ul>
                      <li><a href="#">Item21</a></li>
                      <li><a href="#">Item22</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Item3</a>
                    <ul>
                      <li><a href="#">Item31</a></li>
                      <li><a href="#">Item32</a></li>
                      <li><a href="#">Item32</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Item4</a>
                    <ul>
                      <li><a href="#">Item41</a></li>
                      <li><a href="#">Item42</a></li>
                      <li><a href="#">Item43</a></li>
                      <li><a href="#">Item44</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Item5</a></li>
                  <li><a href="#">Item6</a></li>
                  <li><a href="#">Item7</a></li>
                  <li><a href="#">Item8</a></li>
                </ul>
              </li>
              <li><a href="#">Item9</a></li>
              <li><a href="#">Item1O</a></li>
              <li><a href="#">Item11</a></li>
              <li><a href="#">Item12</a></li>
        </ul>
      </div>
</body>
</html>


Et le code CSS:

@charset "utf-8";

* {
	margin: 0;
	padding: 0;
}
body {
	margin: 10px;
	font: 0.8em "Trebuchet MS", Georgia, Arial;
	color: #565D79;
	background-color: #dcdcdc;
	}
#content{
	position: relative;
	width: auto;
	margin: 0 auto;
	border: 2px solid #000000;
	background-color: #dcdcdc;
	}
#top{
	width: auto;
	height: 200px;
	padding: 2px;
	background-color: #dcdcdc;
	border: 2px solid #FFFFFF;
	}
#top_ban{
	width: 100%;
	height: 200px;
	border: 2px solid #FFFFFF;
	background: url(medias/header.jpg) no-repeat left bottom;
	}
#menu {
	font: 0.9em Tahoma, sans;
	text-align: left;
	list-style-type: none;
	margin: 0 auto 0 auto;
	height: 24px;
	line-height: 24px;
	border-bottom: 2px solid #FFFFFF;
	border-left: 2px solid #FFFFFF;
	border-right: 2px solid #FFFFFF;
	background-color: #ff6347;
	width: auto;
}
#menu li {
	display: inline;
	font-weight: bold;
	height: 24px;
	line-height: 24px;
	padding: 0px 8px 0 8px;
	text-decoration: none;
	font-size: 1.2em;
	text-align: center;
	color: #FFF;
	font-variant: small-caps;
	font-weight: bold;
	border-right: 2px solid #FFFFFF;
}
#menu li a {
	margin: 0 12px;
	color: #FFF;
	text-decoration: none;
}
#menu a:hover {
	text-decoration: underline;
}
#menu2 {
	float: right;
	width: 200px;
	margin-right: 2px;
}
#menu2 li, #menu2 li a{
	display: block;
	color : #FFFFFF;
	height: 22px;
	background-color : #ff6347;
	padding-left: 10px;
	border-top: 0px solid #000000;
}
#menu2 li a:link, #menu2 li a:visited{
	display: block;
	background-color : #e99b00;
	border-top: 0px solid #000000;
}
#menu2 li a:hover{
	display: block;
	background-color : #ff6347;
	color: #FFFFFF;
	border-left: 6px solid #FFFFFF;
	font-variant: small-caps;
	font-weight: bold;
}

/****************************************/
#menu_container { 
  width: auto;
  height: 24px;
  margin: 0 auto 0 auto;
}

/* Configuration of menu width */
html body ul.sf-menu ul,html body ul.sf-menu ul li { 
  width: 200px;
}

html body ul.sf-menu ul ul { 
  margin: 0 0 0 200px;
}

/* Framework for proper showing/hiding/positioning */
ul.sf-menu,ul.sf-menu * { 
  margin: 0;
  padding: 0;
}

ul.sf-menu { 
  display: block;
  position: relative;
}
  
ul.sf-menu li { 
  display: block;
  list-style: none;
  float: left;
  position: relative;
}
  
ul.sf-menu li:hover { 
  visibility: inherit; /* fixes IE7 'sticky bug' */ 
}

ul.sf-menu a { 
  display: block;
  position: relative;
}
  
ul.sf-menu ul { 
  position: absolute;
  left: 0;
  width: 50px; 
  top: auto;
  left: -999999px;
}
  
ul.sf-menu ul a { 
  zoom: 1; /* IE6/7 fix */ 
}

ul.sf-menu ul li { 
  float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
  width: 150px;
}
  
ul.sf-menu ul ul { 
  top: 0;
  margin: 0 0 0 150px;
}

ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul, 
ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,
ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,
ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul { 
  left: auto;
}
  
ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,
ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,
ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,
ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul { 
  left: -999999px;
}

/* autoArrows CSS */
span.sf-arrow { 
  width: 7px;
  height: 7px;
  position: absolute;
  top: 20px;
  right: 5px;
  display: block;
  background: url(images/arrows-white.png) no-repeat 0 0;
  overflow: hidden; /* making sure IE6 doesn't overflow and expand the box */
  font-size: 1px;
}

ul ul span.sf-arrow { 
  right: 10;
  top: 20px;
  background-position: 0 100%;
}

/* Theming the menu */
ul#nav { 
  float: left;
}

ul#nav ul { 
  background: #e99b00;
  margin-top: 5px;
  padding-bottom: 15px;
}

ul#nav li a { 
  padding: auto;
  font: 'Yanone Kaffeesatz', arial, sans-serif;
  text-shadow: 1px 1px #0D7989;
  text-decoration: none;
  color: #FFF;
  margin-right: 2px;
}

ul#nav li a:hover,ul#nav li a:focus { 
  color: #222;
  text-shadow: none;
}
                                 
/****************************************/

#page{
	float: left;
	width: auto;
	padding: 30px 10px 10px 20px;
	min-height: 400px;
	}
#footer{
	width: auto;
	height: 18px;
	padding: 2px;
	background-color: #ff6347;
	border: 2px solid #FFFFFF;
	text-align: center;
	clear: both;
	}
#footer a{
	font-size: 0.8em;
	color: #FFFFFF;
	}
a{
	text-decoration: none;
	color: #2E4FDD;
	}
a:hover{
	text-decoration: underline;
	color: #6974C5;
	}
img.img {
	border: 1px dashed #E1E2E8;
	padding: 6px;
	}
#top_ban h1{
	color: #FFF;
	font: 1.4em Georgia, Arial;
	padding: 85px 0px 4px 10px;
	border: 0px solid #E1E2E8;
	font-weight: bold;
	font-variant: small-caps;
	}
h1{
	color: #018AFA;
	font: 1.4em Georgia, Arial;
	border-bottom: 2px solid #59B2FA;
	border-left: 4px solid #59B2FA;
	text-align: left;
	font-variant: small-caps;
	margin: 10px 0px 10px 0px;
	padding: 0px 10px 0px 10px;
	}
h2{
	width: 60%;
	color: #018AFA;
	font: 1.2em Georgia, Arial;
	border-bottom: 1px solid #59B2FA;
	margin: 10px 0 10px 0;
	padding-bottom: 3px;
	}
	
ul { 
  margin: 2px 0 22px 17px;
}

ul li { 
  list-style-type: circle;
  margin: 0 0 6px 0; 
  padding: 0 0 4px 5px;
  line-height: 1.5em;
}

ol{
	list-style-type: decimal-leading-zero;
  	margin: auto; 
  	padding-left: 15px;
  	line-height: 1.5em;
}
p{
	width: 100%;
	margin: 12px 0px 30px 0px;
	font: 1.9em Tahoma, sans;

	}


Merci de votre aide les amis.
Modifié par mano23 (08 Sep 2012 - 02:19)
alors déjà, il te manque 3 </li> , 1 </ul> et 1 </div> dans ton code HTML Smiley lol

dans le CSS : #menu : height: 24px; Smiley eek (Pourquoi fixer la hauteur vu le deluge de ul/li qu'il contient ?)
Sujet clos
Aller à