Zindex et positionnement

**Gaetan_** · 20/05/2011, 13h34

Bonjour,

J'ai un menu déroulant horizontal :
des onglets, puis le menu déroulant qui s'affiche donc au survol, classique.

J'aimerais que ce menu déroulant passe derrière les onglets.

J'ai donc inversé les z-index mais rien n'y fait, quelqu'un aurait'il une idée ?

URL "test" : http://88.191.144.19/

Le vilain méchant 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
48
49
50
51
52
53
/* Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.  */
 
#nav {padding:0; margin:0; list-style:none; height:38px; background:#fff url(three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left; height:38px;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#5a86bb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(three_0a.gif) no-repeat right top;}
 
#nav li:hover a.top_link {color:#5a86bb; background: url(three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(three_1a.gif) no-repeat right top;}
 
/* Default list styling */
 
#nav li:hover {position:relative; z-index:200;}
 
#nav li:hover ul.sub
{left:1px; top:27px; background: #FFFFFF; padding:3px; border:1px solid #a2c4e4; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #FFFFFF;}
#nav li ul.sub li a.fly
{background:#FFFFFF url(arrow.gif) 80px 6px no-repeat;}
#nav li:hover ul.sub li a:hover 
{background:#6a812c; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#6a812c url(arrow_over.gif) 80px 6px no-repeat; color:#fff;}
 
 
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #FFFFFF; padding:3px; border-right:1px solid #5a86bb; white-space:nowrap; width:90px; z-index:400; height:auto;}
 
#nav ul, 
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
 
#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#6a812c url(arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;} 
 
#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#FFFFFF url(arrow.gif) 80px 6px no-repeat; color:#000; border-color:#FFFFFF;}

Merci de votre aide.

**Gaetan_** · 20/05/2011, 18h02

Peut être que ça manquait de clarté... j'ai modifié la bordure du menu, qui était la même que celle de l'onglet pour bien différencier les deux éléments.

Mon but est de parvenir à ce résultat là :

Si une star du css pouvait m’éclairer...

Merci

**Bisûnûrs** · 21/05/2011, 09h42

Ton li:hover a un z-index plus petit que ton ul.sub.

**Gaetan_** · 22/05/2011, 17h00

Merci pour ta réponse Bisûnûrs mais j'ai essayé et ce ne change rien :
http://88.191.144.19/

#nav li:hover ul.sub : z-index:300;

Code :

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

1
2
#nav li:hover ul.sub
{left:1px; top:27px; background: #FFFFFF; padding:3px; border:1px solid red; white-space:nowrap; width:90px; height:auto; z-index:300;}

#nav li:hover : z-index:200;

Code :

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

1
2
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #FFFFFF; padding:3px; border-right:1px solid #5a86bb; white-space:nowrap; width:90px; z-index:200; height:auto;}

Merci

**Bisûnûrs** · 23/05/2011, 08h54

Hum, mais ton ul.sub est dans ton li, donc ton li ne pourra pas passer au-dessus. Il faut que tu mettes un position:relative et un z-index sur ton a, qui lui est frère de ton ul.

**Gaetan_** · 23/05/2011, 10h17

Super ca avance ! Merci.

Ce n'est pas encore ça mais il faudrait dissocier cette ligne alors : ?

Code :

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

1
2
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #FFFFFF; position:relative; z-index:600; }