Z-Index Problem bei Pulldown Menü

Groooveman · 18.03.2008, 16:41

Hallo und ich bin am Ende,

das Problem ist, das mein "Drop Down Länderauswahl Menü" (oben rechts) hinter meinem Hauptmenü (darunter in rot) im IE 6 & 7 verschwindet. Im FF funkt alles...

Kann mir jemand helfen?

Z-Index habe ich schon bis zum kalten Knochenschlitterkotzen vergeben (sind aus dem Code jetzt wieder entfernt, bis auf einen, der jetzt für den FF notwendig ist), aber die haben nie etwas verändert/verbessert...

Gruss
G

Groooveman · 18.03.2008, 17:58

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

HTML-Code:

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

HTML-Code:

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

hero-master · 18.03.2008, 18:04

Moin

gib dem #choosecountry mal ein z-index von 1, den anderen Objkten brauchste dann keins mehr zuweisen

Groooveman · 19.03.2008, 09:01

Zitat:

Zitat von hero-master

Moin

gib dem #choosecountry mal ein z-index von 1, den anderen Objkten brauchste dann keins mehr zuweisen

Danke, aber das hilft leider auch nicht. Ich hatte schon nahezu in allen Elementen einen z-index definiert - ohne Erfolg...

:/

Groooveman · 19.03.2008, 09:30

ups - okeoke ich nehm alles zurück. Es funktioniert mit #choosecountry {z-index:3;} - das war wohl noch die morgendliche Unzurechnungsfähigkeit (sorry!)

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

10.000 Dank
G