Discussion :

[baggie]

Bonjour, j'ai deux problèmes.

Tout d'abord, problème n°1 :
j'ai un menu horizontal (créé avec <ul> et <li>). Et en dessous, j'ai un sous-menu horizontal créé de la même façon et dont les entrées dépendent de mon menu (normal).

L'image jointe vous montre le système : si je suis sur le menu (orange), j'affiche le sous menu correspondant (les 2 entrées "ss menu").

Lorsque je passe sur un item du menu, le sous-menu s'affiche bien aligné avec l'item du menu.

Cependant, j'aimerai que le "background" de mon sous-menu soit aligné avec l'ensemble du menu. En quelque sorte, que les deux <ul> soient alignées sur la gauche. Et que sur la droite, ce soit la même chose.
Pour conclure : que le sous-menu fasse la même taille que le menu.

Ensuite, problème n°2 :
dans mon sous-menu, je souhaiterai regrouper mes <li> par 2.
J'explique :
> au lieu d'afficher 4 items sur la même ligne, j'aimerai avoir 2 blocs de 2 items.

Mais alors je sais pas du tout comment je pourrais faire ça

Mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<ul>
	<li><a href="">Lien 1</a></li>
        <ul>
              <li>Sous lien 1</li>
              <li>sous lien 2</li>
        </ul>
	<li><a href="">Lien 2</a></li>
	<li><a href="">Lien 3</a></li>
	<li><a href="">Lien 4</a></li>
	<li><a href="">Lien 5</a></li>
</ul>

CSS :

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
 
#main_menu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}
#main_menu li {
	float: left;
	margin: auto;
	padding: 0;
}
#main_menu li a {
	display: block;
	color: 81368B;
	text-decoration: none;
	padding: 5px;
}
#main_menu li a:hover {
	background-image: url(images/main_menu_hover.png);
	background-repeat: repeat-x;
}
 
#main_menu ul li ul {
	display: none;
	background-image: url(images/sous_menu_bg.png);
	background-repeat: repeat-x;
	width: 100%;
	font-size: 11px;
	margin-left: 0;
	padding-left: 0;
}
 
#main_menu li ul li {
	list-style-image: url(images/li_replie_titre.png);
	list-style-position: inside;
	margin-left: 20px;
} 
 
#main_menu ul li:hover ul {
	display: block;
	z-index: 1005;
}
 
#main_menu li ul {
	position: absolute;
}

Je vous remercie !