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 :
Code:
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> |
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.
