Zum Inhalt springen

CSS Problem mit Menü (Position, Z-Index und überlappende Bilder)

Erstellt am 15. Juli 2009 · 4 Antworten · letzte Antwort am 16. Juli 2009

Tags: HTML & CSS, Frage

zappzarapp ·

Ist zwar kein richtiges TS Problem, aber evtl. findet sich hier ja jemand der mir helfen kann:

Ich habe ein Menü als verschachtelte <ul> und die Menüpunkte sind Grafiken. Aussehen soll das ganze am Ende so:
Bild: zappzarapp.at/…/ziel.jpg

Ich habe also den <li> in der ersten Ebene ein position:relative gegeben und dann den <ul> in der zweiten Ebene eine absolute Position und entsprechend versetzt. Ich habe aber das Problem, dass nur der erste Submenüpunkt sichtbar ist, alle nachfolgenden verschwinden dann wieder hinter den nachfolgenden Menüpunkten.

Habe das ganze als Beispiel zu sehen (das Submenü ist etwas weiter nach rechts, dass man sieht wo die Menüpunkte sind):
http://zappzarapp.at/position

Hat irgendwas mit z-index und stacking contexts usw. zu tun, aber ich brings einfach nicht hin - und ich sitze jetzt schon echt lange an dem Problem (In FF habe ich es schon einmal gehabt, aber IE weigert sich)

lg Matthias

p.s. hier ein Link zu einer zip Datei mit dem Menü http://zappzarapp.at/position/menu.zip

vixe ·

Hallo zappzarapp,

hab zwar 'ne Lösung für alle "richtigen" Browser, aber wie du schon geschrieben hast, finde ich auch keine Möglichkeit dies im IE 6 & 7 irgendwie zu realiseren.

<style type="text/css">
img {
	border:none;
}

.main-ul {
	width:258px;
	border:1px solid #000;	
	list-style:none;
	padding:0;
	margin: 0; 
	position: absolute;
}

.main-li {
	height:20px;
	position: relative;
	
}

.sub-ul {
	list-style:none;
	margin:0px;
	width: 110px;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}

.sub-li {
	height:20px;
}
</style>

Gruß

zappzarapp ·

Hi, danke auf jeden Fall.. im IE8 funktioniert die Lösung dann auch - im IE6 + IE7 nicht.. sch"%&$ verdammter gef"§"§$ drecks blöder internet explorer..

lg

zappzarapp ·

So, ich konnte es jetzt lösen:
Jemand hat herausgefunden, dass das Menü funktioniert wenn die <li> des Hauptmenü durchnummeriert werden und sie dann absteigende z-indizes bekommen:

<ul id="main">
	<li style="z-index:10">menu1
		<ul><li>sub1</li><li>sub2<li></ul>
	</li>
	<li style="z-index:9">menu2..
	...
</ul>

Jetzt habe ich das GMenu so aufgebaut, dass jeder Menüpunkte eine eigene aufsteigend nummerierte ID bekommt und weise die Z-Indizes entsprechend über das CSS zu. Ist jetzt natürlich nicht 100% flexibel, aber es funktioniert gut, und das Hauptmenü ändert sich auf dieser Seite eigentlich eh kaum bis gar nicht.

lg Matthias