Zindex et positionnement [Résolu]

[Gaetan_]

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 :

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_]

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]

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

[Gaetan_]

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 :

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 :

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]

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_]

Super ca avance ! Merci.

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

Code :

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

[Bisûnûrs]

Non non, c'est pas de ce lien là que je parle, mais de celui-là :

Code :

#nav li a.top_link

[Gaetan_]

Bisûnûrs MERCI !
Super touchette du css, bravo !