j'ai cherché une solution, mais pas de réponse à ce post :
http://www.developpez.net/forums/d59...ulant-index-z/
J'ai piqué () un code css qui permet de dérouler un menu, lorsque la souris passe dessus. Jusque là, pas de soucis. J'ai voulu mettre plusieurs items les un ou dessous des autres :
item 1
item 2
Le problème arrive : Lorsque je passe ma souris sur item 1, le menu apparait, mais lorsque je descends dans le menu du item 1 sur item 2, le menu du item 1 disparait.
j'espère avoir été clair.
j'ai essayé d'intégrer la notion de z-index dans la feuille css, mais sans succès.
J'ai réussi à l'intégrer dans ma page directement, mais cela ne fonctionne que sous firefox.
page html :
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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37 <div class="contenant_colonne_gauche"> <!--menu--> <div id="menu_gauche"> <ul class="niveau1" style="z-index:0;"> <li> Seniors <ul class="niveau2" style="z-index:30;"> <li>equipe 1</li> <li>equipe 2</li> <li>equipe 3</li> </ul> </li> </ul> <ul class="niveau1" style="z-index:0;"> <li> 18 ans <ul class="niveau2" style="z-index:30;"> <li>equipe 1</li> <li>equipe 2</li> <li>equipe 3</li> </ul> </li> </ul> <ul class="niveau1" style="z-index:0;"> <li> 15 ans <ul class="niveau2" style="z-index:30;"> <li>equipe 1</li> <li>equipe 2</li> <li>equipe 3</li> </ul> </li> </ul> </div> <!--fin_menu--> </div>
j'ai tout intégrer dans le fichier zip au cas ou.
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 /* menu_gauche */ #menu_gauche ul ul { display: none; position: absolute; margin:0px; padding: 0px; border: 1px solid transparent; } #menu_gauche ul.niveau2 { left: 0px; top: 22px; } #menu_gauche li { list-style-type: none; position: relative; width: 140px; background-color:transparent; padding: 2px; margin: 0px; background-image: url(/essence/images/bg.png); } #menu_gauche li:hover { background-color: #FFFF70; } #menu_gauche li:hover ul.niveau2{ display: block; }
merci pour votre aide
Partager