28172 sujets

CSS et mise en forme, CSS3

Probleme avec menu deroulan

Bonjour,

Je cherche a faire un menu déroulant, en m'inspirant de mes cours, mais je bloque sur le 2eme niveau ( pas vue en cours)

Je n'arrive pas à cacher le "double menu" , pouvez-vous m'aider svp ?

Merci beaucoup


<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Document sans nom</title>
<style type="text/css">

.clearboth {
	clear: both;
}
#test {
	background: #FF0000;
}
#menu ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
#menu ul li {
	float: left;
	width: 120px;
	position: relative;
	background: #FFFF00;
	border: thin solid #003399;
}
#menu ul li ul {
	display: none;
	position: absolute;
	left: 0px;
	top: 100%;
}

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


#menu ul li ul li {
	background: #00FFFF;
	position: relative;
}

#menu ul li ul li ul {
	display: none;
	position: absolute;
	top: 0%;
	left: 120px;
}

#menu ul li ul li a {
	padding-left: 10px;
	text-decoration: none;
}
#menu  ul  li  ul  li:hover  ul {
	background: #fff;
	display: block;
}

</style>


</head><body>
<div id="menu">
<ul>
	<li>144444
		<ul>
		<li><a href="#">4</a></li>
		<li><a href="#">5</a></li>
		<li><a href="#">6</a></li>
		<li><a href="#">4</a></li>
		</ul>
	</li>
	<li>34444
		<ul>
			<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
			<li>double menu    
				<ul>
					 <li><a href="#">double 4</a></li>
					<li><a href="#">double 5</a></li>
					<li><a href="#">double 6</a></li>
					<li><a href="#">double 4</a></li>
				</ul>
			</li>
			<li><a href="#">4</a></li>
		</ul>
	</li>
</ul>
</div>

<div class="clearboth"></div>
</body></html>
Bonjour Smiley smile

Remplace 

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


par

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


Par contre cela ne marchera pas sous IE6.

Sinon tu peux t'inspirer de superfish un menu déroulant multiniveaux qui utilise du jquery, jette un petit coup d'oeil au code pour t'inspirer.
Au passage, si tu persiste dans le menu à 3 niveaux, il vaudrait peut-être mieux utiliser un text-indent:-9999px qu'un display:none et ce pour des raisons d'accessibilité : le display:none aura tendance à poser problème à certains screenreaders. Plus d'info sur le sujet dans l'article de Raphael
Sujet clos
Aller à