28172 sujets

CSS et mise en forme, CSS3

Menu déroulant

bonjour voila je viens de créer un menu déroulant mais j'ai un petit soucis coté CSS :s
voila le menu : http://planetesketchup.free.fr/ le problème c'est que le code css utiliser pour les sous listes ne se répètent pas sur les autre il n'est que sur la première :s

mon code css :



#menu {
	padding: 0;
	margin: 0;
	list-style: none;
	height: 41px;
	line-height: 36px;
	text-align: center;
	vertical-align: middle;
	z-index: 20;
}

#menu ul {
	padding: 0;
	margin: 0;
	list-style: none;
	height: 34px;
	line-height: 34px;
	text-align: center;
	vertical-align: middle;
	z-index: 20;
}

#menu {
	font-family: Tahoma;
	font-size: 13px;
	padding-top: 141px;
	position: absolute;
	z-index: 20;
}

#menu a {
	display: block;
	padding-left: 10px;
	padding-right: 8px;
	color: #FFFFFF;
	text-decoration: none;
	z-index: 20;
}

#menu a:hover {
	background-image:  url('images/menu_top.gif');
	background-position: top;
	background-repeat: no-repeat;
	z-index: 20;
}

#menu li { 
	float : left;
}

#menu ul li:hover ul {
	display:block;
}

#menu li:hover ul li {
	float:none;
}

#menu li ul a:hover {    
	background-image: none;
	color: #000000;
	text-align: left;
}

#menu li ul a { 
	color: #999999;
}

#menu li ul {
	position: absolute;
	width: 190px;
	text-align: left;
	background-color: #FFFFFF;
	border-left: 1px solid #F2F2F2;
	border-right: 1px solid #F2F2F2;
	border-bottom: 1px solid #F2F2F2;
	left: -999em;
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul {
	left: auto;
}
Pikachou a écrit :

#menu ul {
	height: 34px;
}

C'est cette propriété qui pose problème, car la hauteur de ton élément n'est pas modifiée lors de son survol.

Il te faut pour cela écraser cette propriété comme suit :
#menu li:hover ul{
  height: auto;
}
Sujet clos
Aller à