Comment corriger mon menu en CSS

Version imprimable

Bonjour à tous,

Je cherche faire un menu à deux niveau.
Le problème que je ne n'arrive pas à résoudre, c'est que le <li> contenant le sous menu, prend la largeur du sous menu.

Voici m'on explication "en image":
Menu

J'aimerais le "Menu 3" garde la meme largeur que les autres, indépendament du nombre de lettres. C'est à dire qu'il y ait le même padding que les autres menu. Mais j'ainerais aussi que le sous menu reste positionné sur son parent, comme c'est affiché maintenant.

J'ai essayé plusieurs solution avec le position:absolute, float etc, mais sans susccès
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 <style type="text/css">  </style></head> <body> <div id="container"> <ul id="menu"> <li class="level1">Menu 1</li> <li class="level1">Menu 2</li> <li class="level1">Menu 3 <ul> <li class="level2">Bonjour à tous</li><li class="level2">Aurevoir</li><li class="level2 last">Bonsoir</li> </ul> </li> <li class="level1 last">Menu 4</li> </ul>
Auriez-vous une solution?

J'ai plus au moins, réussi à faire mon truc,
Ce que je n'arrive pas maintenant c'est que mes li enfant soient aligné horizontalement.

J'aimerais que le #menu li ul ne tienne pas en compte de son li parent, mais du nombre de li enfant.

Ou que les li enfant, soit du deuxième niveau, ne se mettre pas l'un dessous de l'autre, mais à la ligne

Voci mes corrections
Menu

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
 
<style type="text/css">
<!--
body {
	background-color: #999;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
}
#container{
	width:600px;
	margin:auto;
	background-color:#FFF;
	height:300px;
}
ul,li{
	margin:0px;
	padding:0px;
}
ul#menu{
	float:right;
}
ul#menu li ul{ position:absolute; right:-1px; border-right:1px solid #000;}
 
li.level1,li.level2{
	list-style-type:none;
	display:block;
	float:left;
 
	padding:3px 5px 3px 5px;
 
}
 
li.level1{position:relative; 	border-right:1px solid #000;}
 
li.level2{
font-size:12px;
}
li.last{border:0px;}
-->
</style></head>
 
<body>
<div id="container">
 
<ul id="menu">
<li class="level1">Menu 1</li>
<li class="level1">Menu 2</li>
<li class="level1">Menu 3
<ul>
	<li class="level2">Bonjour à tous</li><li class="level2">Aurevoir</li><li class="level2 last">Bonsoir</li>
    </ul>
</li>
<li class="level1 last">Menu 4</li>
</ul>
</div>

Merci

27/06/2012, 12h22
mcoutant

Salut pierrot10,

En faite je n'ai pas très bien compris ton problème, pourrais tu nous faire sous paint le rendu voulu pour une meilleur compréhension ?