Discussion :

[derzy971]

Bonjour,

j'essaye de faire un menu déroulant avec 3 sous niveaux, jusqu'au premier tout fonctionne mais pour le 3è sa ne fonctionne pas.
Voici mon code (ce n'est qu'un test) :
le html

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
 
<ul>
	<li>
		<a href="#">Partie 1</a>
		<ul>
			<li><a href="#">Sous Menu 1</a></li>
				<ul>
					<li><a href="#">Sous Sous Menu 1</a></li>
					<li><a href="#">Sous Sous Menu 2</a></li>
				</ul>
			<li><a href="#">Sous Menu 2</a></li>
			<li><a href="#">Sous Menu 3</a></li>
		</ul>
	</li>
 
	<li>
		<a href="#">Partie 2</a>
		<ul>
			<li><a href="#">Sous Menu 1</a></li>
				<ul>
					<li><a href="#">Sous Sous Menu 1</a></li>
					<li><a href="#">Sous Sous Menu 2</a></li>
				</ul>
			<li><a href="#">Sous Menu 2</a></li>
			<li><a href="#">Sous Menu 3</a></li>
		</ul>
	</li>
</ul>

le 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
ul
{
	background-color:red;
}
ul li ul li
{
	background-color:green;
	display:none;
}
ul li:hover ul li
{
	display:block;
}

ul li ul li ul li /* ne fonctionne pas*/
{
	display:none;
}

j'ai essayé avec l'attribut visibility, mais sa fonctionne pas non plus.
Si je pouvais mettre une class dans les ul sa réglerait le problème, mais malheureusement, je ne peux pas.

Pourriez-vous m'aider à résoudre ce problème ?

Merci d'avance

[Macmillenium]

Bonjour,

Cette structure :

Code html :

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

1
2
3
4
5
6
7
8
		<ul>
			<li><a href="#">Sous Menu 1</a></li>
				<ul>
					<li><a href="#">Sous Sous Menu 1</a></li>
					<li><a href="#">Sous Sous Menu 2</a></li>
				</ul>
		</ul>

Est incorrecte, UL ne peut avoir que des LI comme enfants directs.

Code xhtml :

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
 
<ul>
	<li>
		<a href="#">Partie 1</a>
		<ul>
			<li><a href="#">Sous Menu 1</a>
				<ul>
					<li><a href="#">Sous Sous Menu 1</a></li>
					<li><a href="#">Sous Sous Menu 2</a></li>
				</ul>
			</li>
			<li><a href="#">Sous Menu 2</a></li>
			<li><a href="#">Sous Menu 3</a></li>
		</ul>
	</li>
 
	<li>
		<a href="#">Partie 2</a>
		<ul>
			<li><a href="#">Sous Menu 1</a>
				<ul>
					<li><a href="#">Sous Sous Menu 1</a></li>
					<li><a href="#">Sous Sous Menu 2</a></li>
				</ul>
			</li>
			<li><a href="#">Sous Menu 2</a></li>
			<li><a href="#">Sous Menu 3</a></li>
		</ul>
	</li>
</ul>

Ensuite, tu peux jouer sur le sélecteur des enfants directs:

Code css :

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
 
ul
{
	background-color:red;
}
ul li ul li
{
	background-color:green;
	display:none;
}
ul li:hover > ul > li /* Tu sélectionnes les li de 2eme niveau */
{
	display:block;
}
 
ul li > ul > li:hover > ul > li /* Tu sélectionnes les li de 3eme niveau */
{
	display:block;
}

[derzy971]

merci Macmillenium sa fonctionne

[derzy971]

Bien que le menu fonctionne parfaitement avec firefox et IE 7 et 8, il ne fonctionne pas avec IE 6,
j'ai lu qu'il fallait passer par le javascript + css mais j'y connais rien en javascript.
Avez-vous une idée pour réaliser cela ?

[Macmillenium]

http://www.developpez.net/forums/d72...6/#post4226738