groooveman: CSS - Ich werd bekloppt...

Beitrag lesen

Vielleicht ein bischen übersichtlicher: Das 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...

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

<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-colorrange; }
#menu1 a:hover { display:block; background-colorrange; }