Willkommen auf dem Portal für Mediengestalter

Groooveman · **Verfasst** Di 18.03.2008 18:54 **Titel**

Hallo und ich bin am Ende,

das Problem ist, das mein Drop Down Menü (oben rechts "Land 1", wird bei hover grün) hinter meinem Hauptmenü (darunter in orange links in blau) im IE 6 & 7 verschwindet. Im FF funkt alles...

Kann mir jemand helfen?

Gruss
G

###################################################

<body>
<div id="top">
<div id="choosecountry">
<a href="#" title="Land 1">Land 1</a>
<ul>
<li><a href="#" title="Land 1">Land 1</a></li>
<li><a href="#" title="Land 2">Land 2</a></li>
<li><a href="#" title="Land 3">Land 3</a></li>
</ul>
</div>
<ul>
<li><a href="#" title="1">1</a></li>
<li><a href="#" title="2">2</a></li>
<li><a href="#" title="3">3</a></li>
</ul>
<div id="mainmenu">
<ul>
<li id="menu1">
<a href="#" title="Seite A"><span>Seite A</span></a>
<ul id="submenu1">
<li><a href="#" title="DUMMY">Seite 1</a></li>
<li><a href="#" title="DUMMY">Seite 2</a></li>
<li><a href="#" title="DUMMY">Seite 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>

###################################################

#top {
float:left;
width:512px;
height:114px;
}

#topmenu {
width:512px;
height:76px;
}

#topmenu ul {
float:right;
}

#topmenu li {
float:left;
}

#choosecountry {
position:relative;
float:right;
width:114px;
}

#choosecountry ul {
position:absolute;
top:33px;
left:-5px;
width:120px;
height:0;
visibility:hidden;
z-index:3;
background-color:green;
}

#choosecountry:hover ul {
visibility:visible;
height:auto;
}

#choosecountry ul li a, #choosecountry ul li a:link, #choosecountry ul li a:visited, #choosecountry ul li a:active { width:120px; display:block; }

#mainmenu {
height:38px;
background-color:blue;
}

#mainmenu ul { border:1px solid yellow; }

#mainmenu ul li {
position:relative;
float:right;
list-style-type:none;
border:1px solid red;
z-index:1;
}

#mainmenu a, #mainmenu a:link, #mainmenu a:active, #mainmenu a:visited, #mainmenu a:hover { display:block; }

#mainmenu span { display:none; }

#mainmenu ul li ul {
position:absolute;
top:38px;
left:0;
width:146px;
height:0;
visibility:hidden;
}

#menu1:hover #submenu1 { width:120px; height:auto; visibility:visible; }

#mainmenu ul li ul li a, #mainmenu ul li ul li a:link, #mainmenu ul li ul li a:active, #mainmenu ul li ul li a:visited {
background:none;
width:146px;
height:auto;
}

#menu1 a, #menu1 a:link, #menu1 a:active, #menu1 a:visited { height:38px; width:86px; display:block; background-color:orange; }
#menu1 a:hover { display:block; background-color:orange; }

intelli · **Verfasst** Di 18.03.2008 19:31 **Titel**

Poste mal lieber den Link, da bei dem Quelltext und dem CSS das Ganze auch in FF falsch / schlecht dargestellt wird. Alleine der Abstand von choosecountry

Groooveman · **Verfasst** Mi 19.03.2008 09:58 **Titel**

Danke. Es gibt leider noch keine Seite zum zeigen - alles im Aufbau.

Sorry, den Abstand hab ich übersehen bei rauskopieren fürs Forum, soll natürlich nicht so sein und genau deshalb wird es auch so schlecht dargestellt. Das ist nicht das fertige Layout *zwinker*

Aber das Problem bleibt leider (in IE 6 & 7): Die eingeblendete "Hover Ebene" (grün) verschwindet hinter der orangen Navigations Ebene. Warum bloss???

bacon · **Verfasst** Mi 19.03.2008 10:03 **Titel**

Ja kacke. Im IE kann afraik jedes non-static Element einen z-index kriegen. Somit solltest du auch den (auf den ersten Blick gesehen, muss nicht unbedingt stimmen) relativen Elterncontainer mit nem z-index belegen. Je nach Komplexität des Menus bzw. der Überlappungen musst du im Zweifel dem gerade aktiven Element dynamisch (per JS oder so) den höchsten z-index verpassen. Das kann man aber oftmals wieder durch geschickte HTML-Strukturierung und CSS-Tuning vermeiden.

Groooveman · **Verfasst** Mi 19.03.2008 10:31 **Titel**

Yipieehhh! *hehe*

Es funktioniert mit #choosecountry {z-index:3;}.

Der Trink war eben genau jenem relativ positionierten Eltern-Element (#choosecountry) einen z-index zu geben!

10.000 Dank
G

Willkommen auf dem Portal für Mediengestalter

Thema: CSS - Navigationen untereinander (z-index) vom 18.03.2008

CSS - Navigationen untereinander (z-index)