Problème de menu déroulant

Résolu/Fermé
le-tux Messages postés 263 Date d'inscription dimanche 24 août 2008 Statut Membre Dernière intervention 1 mai 2020 - 15 nov. 2012 à 20:07
le-tux Messages postés 263 Date d'inscription dimanche 24 août 2008 Statut Membre Dernière intervention 1 mai 2020 - 15 nov. 2012 à 22:02
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 vendredi 2 novembre 2012 Statut Membre Dernière intervention 17 décembre 2015 126
15 nov. 2012 à 20:11
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 dimanche 24 août 2008 Statut Membre Dernière intervention 1 mai 2020 22
15 nov. 2012 à 20:46
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 vendredi 2 novembre 2012 Statut Membre Dernière intervention 17 décembre 2015 126
15 nov. 2012 à 20:59
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 dimanche 24 août 2008 Statut Membre Dernière intervention 1 mai 2020 22
15 nov. 2012 à 22:02
Merci ça à bien fonctionné.
0