---
title: "CSS Problem mit Menü (Position, Z-Index und überlappende Bilder)"
url: "https://www.typo3.net/d/91332-css-problem-mit-menue-position-z-index-und-ueberlappende-bilder"
source: "typo3.net"
tags: ["Frontend","Styling","Frage","HTML & CSS"]
created: "2009-07-15"
last_reply: "2009-07-16"
replies: 4
solved: false
page: 1
pages: 1
lang: "de"
---

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

Frontend › Styling · 4 Antworten · gestartet 2009-07-15

## Eröffnungsbeitrag

**zappzarapp** · 2009-07-15 · [Beitrag #1](https://www.typo3.net/d/91332-css-problem-mit-menue-position-z-index-und-ueberlappende-bilder/1)

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](http://zappzarapp.at/position/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>

## Antworten

### [#2](https://www.typo3.net/d/91332-css-problem-mit-menue-position-z-index-und-ueberlappende-bilder/2) · Unbekannter Benutzer · 2009-07-15

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.

```html
<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ß

### [#3](https://www.typo3.net/d/91332-css-problem-mit-menue-position-z-index-und-ueberlappende-bilder/3) · zappzarapp · 2009-07-16

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

### [#4](https://www.typo3.net/d/91332-css-problem-mit-menue-position-z-index-und-ueberlappende-bilder/4) · Unbekannter Benutzer · 2009-07-16

... du sprichst mir aus der Seele :D

grüße

### [#5](https://www.typo3.net/d/91332-css-problem-mit-menue-position-z-index-und-ueberlappende-bilder/5) · zappzarapp · 2009-07-16

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:

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

---

Quelle: „CSS Problem mit Menü (Position, Z-Index und überlappende Bilder)“, typo3.net, https://www.typo3.net/d/91332-css-problem-mit-menue-position-z-index-und-ueberlappende-bilder
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.