28172 sujets

CSS et mise en forme, CSS3

Menu déroulant largeurs variables sans JS

Bonjour à tous !

Comme mon titre l'indique je souhaiterais réaliser un ménu déroulant qui fonctionne sans javascript, du moins sous Firefox.
Jusque-là ça va. Le souci c'est que le menu va être administrable, ce qui impose que les largeurs ne doivent pas être fixées.

Quand j'ai au moins 2 sous-menus dans 1 menu parent, ça passe. Mais quand je n'en ai qu'un seul, le "li" ne s'adapte pas à la largeur de son parent (alors qu'il a un width:100%).

Voilà le code en question :


<!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" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
html,body,a,ul,li{margin:0;padding:0}
body{	font-family:Arial,Verdana,sans-serif;	font-size:12px;	line-height:1}	

/* ---------- MENU ----------- */
.menu{
	float:left;
	width:100%;
	margin-bottom:26px;
	background:#B4ADB5;
}
.menu li{
	list-style:none;
	float:left;
	position:relative;
	text-align:center;
}
.menu a{
	color:#fff;
	padding:9px 18px 10px 18px;
	display:block;
}

/* ------ MENU SECOND NIVEAU-------- */
.menu li ul{
	background:#fff;
	position:absolute;
	color:#906C69;
	display:none;
	border:2px solid #B4ADB5;
	border-top:none;
	z-index:200;
}
.menu li:hover{
	background:#fff;
}
.menu li:hover a{
	color:#906C69;
	border:2px solid #B4ADB5;
	border-bottom:none;
	padding:7px 16px 10px 16px;
}
.menu li a:hover{
	background:#EDE8E7;
}
.menu li:hover ul li a{
	color:#906C69;
	border:none;
	margin:0;
	background:#fff;
}
.menu li ul li a:hover{
	background:#EDE8E7;
	margin:0;
}
.menu li:hover ul{
	display:block;
}
.menu li ul li{
	width:100%;
	height:29px;
}
.menu li ul li a{
	color:#906C69;
}
</style>
</head>
<body>

<ul class="menu">
	<li><a href="#">Qu'est-ce que le projet Bidule ?</a>
		<ul>
			<li><a href="#">Les enjeux</a></li>
			<li><a href="#">Les objectifs</a></li>
			<li><a href="#">Les intérêts</a></li>
		</ul>
	</li>
	<li><a href="#">Les porteurs du projet</a>
		<ul>
			<li><a href="#">Nos partenaires</a></li>
		</ul>
	</li>
	<li><a href="#">L'annuaire des acteurs du projet</a></li>
</ul>
		
</body>
</html>


Si finalement, je dois utiliser du JS ça n'est pas trop grave... J'aimerais juste savoir si c'est possible sans.

Merci d'avance pour vos réponses.
Sujet clos
Aller à