Problème de menu déroulant
Résolu
Bonjour, je viens de mettre en place des sous menus à mes onglet en haut de mon blog. Le souci c'est qu'il sont constamment visibles. j'aimerais les faire dérouler au passage de la souris, mais je ne sais pas quoi modifier dans le Css.
Merci d'avance pour votre aide.
Voici mon blog : http://tounovoyages.blogspot.com/
Voici mon code Css :
Merci d'avance pour votre aide.
Voici mon blog : http://tounovoyages.blogspot.com/
Voici mon code Css :
*{
margin:0;
padding:0;
}
#menu{
margin:20px 0 0 50px;
background:#0f0;
color:#fff;
float:left;
display:inline;
}
#menu div{
width:120px;
text-align:center;
}
.menu{
position:relative;
}
#menu div a:link, #menu div a:visited, #menu div a:hover{
color:#fff;
font-family:arial,sans-serif;
font-size:12px;
text-decoration:none;
padding-top:3px;
height:22px;
display:block;
}
#menu div a:link, #menu div a:visited{
background:#404040;
}
#menu div a:hover, #menu div a:active, #menu div a:focus{
background:#ca0003;
}
.sousmenu{
position:absolute;
left:120px;
top:0;
}
#content{
margin:20px 0 0 10px;
width:600px;
border:1px solid #abc;
float:left;
4 réponses
-
Merci ça à bien fonctionné.
-
C'est mieux avec le code html, en effet :)
Rajoute ceci :
ul ul{display:none;}
li:hover ul {display:block;} -
C'est bien ce que je pensais mais ça ne fonctionne pas. Mais je me suis aperçu que je ne vous est pas mis tout le code qui concerne mes onglets.
Le voici en entier cette fois.
*{ margin:0; padding:0; } #menu{ margin:20px 0 0 50px; background:#0f0; color:#fff; float:left; display:inline; } #menu div{ width:120px; text-align:center; } .menu{ position:relative; } #menu div a:link, #menu div a:visited, #menu div a:hover{ color:#fff; font-family:arial,sans-serif; font-size:12px; text-decoration:none; padding-top:3px; height:22px; display:block; } #menu div a:link, #menu div a:visited{ background:#404040; } #menu div a:hover, #menu div a:active, #menu div a:focus{ background:#ca0003; } .sousmenu{ position:absolute; left:120px; top:0; } #content{ margin:20px 0 0 10px; width:600px; border:1px solid #abc; float:left; } #navcontainer ul li { list-style-type: none; padding: 0; margin: 0; display: hover; float: left; background: url("http://biphome.spray.se/karl10/images/navBarBg.gif") repeat-x 20px; font: 10px/20px "Lucida Grande", verdana, sans-serif; text-align: center; } #navcontainer a { color: #000; text-decoration: none; display: block; width: 115px; border-top: 1px solid #A8B090; border-bottom: 1px solid #A8B090; border-left: 1px solid #A8B090; } #navcontainer li#active { background: url("http://biphome.spray.se/karl10/images/navBarBgHover.gif") repeat-x 20px; } #navcontainer a:hover { background: url("http://biphome.spray.se/karl10/images/navBarBgHover.gif") repeat-x 20px; }
Et voici le html de mes onglets :<div id="navcontainer"> <ul class="glossymenu vert" id="navlist"> <li class="current"><a href="http://tounovoyages.blogspot.com/"><b>Accueil</b></a></li> <li class="current"> <a href="http://tounovoyages.blogspot.com/2010/03/benevole-au-cambodge.html"><b>Bénévolat</b></a> <ul> <li><a href="http://www.krousar-thmey.org/"target=_blank>krousar thmey</a></li> </ul> <ul> <li><a href="http://www.brick-for-cambodia.net/"target=_blank>Slarkram School</a></li> </ul> </li> <li class="current"><a href="http://tounovoyages.blogspot.com/search/label/Guides%20pratiques"><b>Guides pratiques</b></a> <ul> <li><a href="http://tounovoyages.blogspot.com/search/label/Angkor%20pour%20les%20%22nuls%22">Angkor</a></li> </ul> <ul> <li><a href="http://tounovoyages.blogspot.com/search/label/Le%20Vietnam%20pour%20les%20%22nuls%22">Vietnam</a> </li> </ul> </li> <li class="current"><a href="http://tounovoyages.blogspot.com/2009/04/votre-nom-ou-pseudo-votre-adresse-e.html"><b>Nous contacter</b></a></li> <li class="current"><a href="http://tounovoyages.blogspot.com/search/label/Nos%20concours"><b>Nos concours</b></a></li></ul></div> -
display:none; pour cacher quelque chose, me semble que pour ton code, il faut le mettre à #menu div.
