Probleme menu déroulant
Bonjour à tous,
voilà j'ai un soucis avec un menu déroulant qui... n'apparait tout simplement pas. J'ai suivi plusieurs guides mais impossible de voir mon erreur. Peut-être y verrez vous plus clair.
Voici mon CSS
#menu {
padding: 0 45px 0 45px;
position: relative;
background: #209D9D url(images/img02.gif) repeat-x top left;
margin: 0 0 0 0;
height: 60px;
line-height: 60px;
width: 890px;
border-top: solid 1px #5AD7D7;
text-shadow: 0 1px 1px #007D7D;
}
#menu a {
text-decoration: none;
color: #FFFFFF;
font-size: 1.25em;
letter-spacing: -1px;
}
#menu ul {
list-style: none;
}
#menu ul li {
padding: 0 20px 0 20px;
display: inline;
}
#menu ul li.first {
padding-left: 0;
}
#menu ul ul {
display : none;
}
div# ul li:hover > ul{
display : block;
}
et le HTML
<div id="menu">
<ul>
<li class="first current_page_item"><a href="#">Accueil</a></li>
<li><a href="forme.html">Forme</a>
<ul>
<li> Régime </li>
<li> Sport </li>
<li> Tonus </li>
</ul>
</li>
<li><a href="#">Bien-Etre</a>
<ul>
<li> plop </li>
</ul>
</li>
<li><a href="#">Contact</a>
</li>
<li><a href="#">Boutique</a></li>
<li></li>
</ul>
<br class="clearfix" />
</div>
voilà j'ai un soucis avec un menu déroulant qui... n'apparait tout simplement pas. J'ai suivi plusieurs guides mais impossible de voir mon erreur. Peut-être y verrez vous plus clair.
Voici mon CSS
#menu {
padding: 0 45px 0 45px;
position: relative;
background: #209D9D url(images/img02.gif) repeat-x top left;
margin: 0 0 0 0;
height: 60px;
line-height: 60px;
width: 890px;
border-top: solid 1px #5AD7D7;
text-shadow: 0 1px 1px #007D7D;
}
#menu a {
text-decoration: none;
color: #FFFFFF;
font-size: 1.25em;
letter-spacing: -1px;
}
#menu ul {
list-style: none;
}
#menu ul li {
padding: 0 20px 0 20px;
display: inline;
}
#menu ul li.first {
padding-left: 0;
}
#menu ul ul {
display : none;
}
div# ul li:hover > ul{
display : block;
}
et le HTML
<div id="menu">
<ul>
<li class="first current_page_item"><a href="#">Accueil</a></li>
<li><a href="forme.html">Forme</a>
<ul>
<li> Régime </li>
<li> Sport </li>
<li> Tonus </li>
</ul>
</li>
<li><a href="#">Bien-Etre</a>
<ul>
<li> plop </li>
</ul>
</li>
<li><a href="#">Contact</a>
</li>
<li><a href="#">Boutique</a></li>
<li></li>
</ul>
<br class="clearfix" />
</div>
2 réponses
-
jai reussi a fair apparaitre les menusetles sou menus pour ce qui es du style( les bords arrondis...) tu peux proceder par elimination en mettant un a un les attributs css en commentaire
-
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Example 5 - CSS Dropdown Menu</title>
<link rel="stylesheet" href="copier.css">
</head>
<body>
<ul id="navWrapper"> <!-- Top Nav -->
<li> <!-- Menu A -->
<a href="pageA.html" aria-haspopup="true">Acceuil</a>
</li>
<li> <!-- Menu A -->
<a href="pageA.html" aria-haspopup="true">forme</a>
<ul>
<li><a href="pageA1.html">regime</a></li>
<li><a href="pageA2.html">sport</a></li>
<li><a href="pageA2.html">tonus</a></li>
</ul>
</li> <!-- Menu A -->
<li> <!-- Menu A -->
<a href="pageA.html" aria-haspopup="true">Bien etre</a>
<ul>
<li><a href="pageA1.html">plop</a></li>
</ul>
</li>
<li> <!-- Menu A -->
<a href="pageA.html" aria-haspopup="true">contact</a>
</li>
<li> <!-- Menu A -->
<a href="pageA.html" aria-haspopup="true">boutique</a>
</li>
</ul> <!-- Top Nav -->
</body>
</html>
a, a:hover {
text-decoration: none;
}
/**********/
ul#navWrapper {
border: 0 black dashed;
margin-left: -39px;
float: left;
}
ul#navWrapper li {
border: 0 red dashed;
float: left;
list-style: none;
margin-right: 0.75em;
background-color: #DDD;
padding: 0 0.25em;
border-radius: 4px;
box-shadow: 3px 3px 6px 1px #333;
}
ul#navWrapper li li {
border: 0 blue dashed;
float: none;
margin-left: -44px;
margin-top: 3px;
}
ul#navWrapper li li:first-child {
margin-top: 4px;
}
ul#navWrapper ul {
display: none;
position: absolute;
background-color: #FFF; /* For non-CSS3 browsers. */
background-color: rgba(255, 255, 255, 0);
}
ul#navWrapper li:hover ul {
display: block;
}
ul#navWrapper a {
font-weight: bold;
}
ul#navWrapper li:hover {
background-color: #8C8D61;
}
/**********/
div#banner {
border: 1px black solid;
border-radius: 4px;
clear: both;
height: 4em;
background-color: rgb(85, 126, 185); /* For non-CSS3 browsers. */
background-image: -webkit-radial-gradient(100% 0%, circle cover, rgb(104,24,136) 0%, rgb(85,126,185) 100%);
background-image: radial-gradient(circle at 100% 0%, rgb(104,24,136) 0%, rgb(85,126,185) 100%); /* IE10 and later */
}
