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 HTML : 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
 
<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;
        overflow:hidden;
}
ul,li{
        margin:0px;
        padding:0px;
}
ul#menu{
        float:right;
}
li.level1,li.level2{
        list-style-type:none;
        float:left;
        padding:3px 5px 3px 5px;
        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>

Auriez-vous une solution?