Discussion :

[ledisciple]

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 :

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>

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
 
/*	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;
}

j'ai tout intégrer dans le fichier zip au cas ou.

merci pour votre aide

[Erwan31]

Bonjour,
lorsque je charge la page index, les menu est déjà déroulé et il n'y a aucune image, c'est normal?

[Macmillenium]

Bonsoir,

j'espère avoir été clair.

Pas trop, non

Le seul problème que je vois c'est le menu qui passe en dessous de la Div boite_trois_colonnes doté d'un overflow:hidden et qui couvre (incorrectement) ses descendants (ul) positionnés en absolute quand ces derniers sont enfants des éléments (li) positionnés en relative.

Tu peux corriger ce problème en attribuant une autre propriété pour conférer le nouveau contexte de formatage (float:left/right ou display:inline-block au lieu de overflow:hidden)

lorsque je charge la page index, les menu est déjà déroulé et il n'y a aucune image, c'est normal?

Il faut changer le chemin du fichier css "modele/style.css" ...

[ledisciple]

Pas trop, non

un petit dessin pour l'exemple :

item 1
item 1.1
item 1.2
item 1.3
item 2

Lorsque je passe ma souris sur "item 1" les sous-items se déplient. Pas de soucis.
Mais lorsque je passe ma souris sur item 1.2 pour cliquer sur le lien, c'est item 2 qui se déplie. Du coup, j'ai essayé de placer item 1 et 2 sur "un autre plan d'existance" que les sous item (de 1.1 à 1.3) en utilisant z-index dans mon code html. Ce système marche sur firefox, mais pas sur explorer.

Le seul problème que je vois c'est le menu qui passe en dessous de la Div boite_trois_colonnes doté d'un overflow:hidden et qui couvre (incorrectement) ses descendants (ul) positionnés en absolute quand ces derniers sont enfants des éléments (li) positionnés en relative.

Tu peux corriger ce problème en attribuant une autre propriété pour conférer le nouveau contexte de formatage (float:left/right ou display:inline-block au lieu de overflow:hidden)

c'est vrai, j'avais remarqué ce problème sur firefox ( mais pas sur explorer), mais je n'ai pas plus préter attention que ça car la colonne sera beaucoup plus grande que pour l'exemple. Du coup, ça passera plus en dessous.