Problème de menu déroulant

Résolu
le-tux Messages postés 263 Date d'inscription   Statut Membre Dernière intervention   -  
le-tux Messages postés 263 Date d'inscription   Statut Membre Dernière intervention   -
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 :

*{
	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;



A voir également:

4 réponses

Nhay Messages postés 838 Date d'inscription   Statut Membre Dernière intervention   126
 
display:none; pour cacher quelque chose, me semble que pour ton code, il faut le mettre à #menu div.
0
le-tux Messages postés 263 Date d'inscription   Statut Membre Dernière intervention   22
 
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>
0
Nhay Messages postés 838 Date d'inscription   Statut Membre Dernière intervention   126
 
C'est mieux avec le code html, en effet :)
Rajoute ceci :
ul ul{display:none;}
li:hover ul {display:block;}
0
le-tux Messages postés 263 Date d'inscription   Statut Membre Dernière intervention   22
 
Merci ça à bien fonctionné.
0