menu déroulant largeurs variables sans JS

**Ziltoid** · 27/04/2010, 11h00

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 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!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>