Bonjour,

Je cherche depuis quelques jours à faire mon propre menu déroulant..(hé oui je ne suis pas une lumière en CSS)

Je suis arrivé à un certain résultat mais le but ultime est de positionner 2 menus déroulants l'un au dessus de l'autre.

Et c'est là que surgit le problème :
Quand je déroule le 1er menu (1er rang), il se confond avec le menu au dessous (2eme rang).

Pourtant j'ai bien spécifié z-index=1 pour le 1er niveau de menu et z-index=2 pour le 2eme niveau...

Voici le code CSS du menu :
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
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
93
94
 
.menulp { 
	height:30px;
	background-color:#f6f6f6;
	border-top:1px solid #d8d8d8;
	border-right:1px solid #d8d8d8;
	border-left:1px solid #d8d8d8;
	text-align:center;
} 
 
.menulp ul { 
	padding: 0;
	margin:0px;
} 
 
/*On positionne les elements du menu */ 
.menulp ul li { 
	position:relative; 
	list-style: none; 	/*on enleve les icones de liste */ 
	float:left;/* float left pour les li afin d'aligner le menu */ 
	padding:2px 5px 0px 5px;
	height:24px;
	z-index:1;
} 
 
.menulp li {
	height:28px;
	border-left: 1px solid #fff;		/* separateurs */
	border-right: 1px solid #d8d8d8;
}
.menulp li li{
	border: none;	/* pas de separateurs pour les sous-menus */
	text-align:left;	/* alignement à gauche des sous-menus */
}
 
.menulp li.node ul {	/* bordure et fond des sous-menus */
	background:#f6f6f6;
	border:1px solid #d8d8d8;
}
 
.menulp ul ul { 
	position: absolute; 
	display:none;	/* on cache les sous-menus */
	width:150px; 
	top:27px;	/* Position des sous-menus */
	left: -1px;
	z-index:2;
}
 
/* Correction bug alignement vertical des menus niveau 2 */
.menulp ul ul li { 
	width:138px;
}
 
.menulp ul ul ul { 
	top:-1px;/* Position des sous-sous-menus */
	left: 149px;
}
 
.menulp li a { 
	text-decoration: none; /* plus de soulignement pour les liens */ 
	display:block;
	padding: 4px 0 4px /*8px*/;
	color: #333333; font-size: 12px; font-weight: bold;
	height:20px;
} 
 
.menulp li.node ul li a {	/* style du texte des sous-menus */
	color: #333333; font-size: 11px;  font-weight: normal;
}
 
/***************************************************************
*		AFFICHAGE DES SOUS-MENUS
***************************************************************/
/* Survol niveau 1 : on affiche niveau 2 et on cache niveau 3 */ 
.menulp ul  li:hover ul { display:block; }
.menulp ul  li:hover ul  ul{ display:none; }
 
/* Survol niveau 2 : on affiche niveau 3 et on cache niveau 4 */ 
.menulp ul ul li:hover ul { display:block; }
.menulp ul ul li:hover ul ul { display:none; }
 
/* Survol niveau 3 : on affiche niveau 4 et suivants */ 
.menulp ul ul ul li:hover ul { display:block; }
/* pour cacher niveau 5 :
.menulp ul ul ul li:hover ul ul { display:none; }*/
 
/*****************************
*     GESTION MOUSE-OVER
*****************************/
.menulp ul  li:hover { 
	border:1px solid #6D9D2E;
	background-color: #E7EDDF;
}

et 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
29
30
31
32
33
34
35
 
<div id="testmenu1" class="menulp">
	<ul>
		<li><a href=""><span>Menu 1</span></a></li>
		<li class="node item16"><a href=""><span>Menu 2</span></a>
			<ul>
				<li><a href=""><span>Sous-Menu 1</span></a></li>
				<li><a href=""><span>Sous-Menu 2</span></a></li>
				<li><a href=""><span>Sous-Menu 3</span></a></li>
				<li><a href=""><span>Sous-Menu 4</span></a></li>
				<li><a href=""><span>Sous-Menu 5</span></a></li>
			</ul>
		</li>
		<li><a href=""><span>Menu 3</span></a></li>
		<li><a href=""><span>Menu 4</span></a></li>
		<li><a href=""><span>Menu 5</span></a></li>
	</ul>
</div>
<div id="testmenu2" class="menulp">
	<ul>
		<li><a href=""><span>Menu 1</span></a></li>
		<li class="node item16"><a href=""><span>Menu 2</span></a>
			<ul>
				<li><a href=""><span>Sous-Menu 1</span></a></li>
				<li><a href=""><span>Sous-Menu 2</span></a></li>
				<li><a href=""><span>Sous-Menu 3</span></a></li>
				<li><a href=""><span>Sous-Menu 4</span></a></li>
				<li><a href=""><span>Sous-Menu 5</span></a></li>
			</ul>
		</li>
		<li><a href=""><span>Menu 3</span></a></li>
		<li><a href=""><span>Menu 4</span></a></li>
		<li><a href=""><span>Menu 5</span></a></li>
	</ul>
</div>
HELP !!