• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Problem mit z-index

S

Sempervivum

Guest
Hallo,
bei meiner Navigation habe ich ein Problem mit der Sichtbarkeit und zwar wird z. B. auf dieser Seite
http://www.ulrichbangert.de/orchid/mediaelement/2013-03-25_Pleione_Ueli_Wackernagel_Pearl.php
die zweite Stufe des Menüs durch das Video überdeckt (zu sehen wenn man mit der Maus auf "Hier lebe ich" oder "Am Meer" geht).
Mein CSS:
Code:
ul#Navigation li ul {
background-color: transparent;
margin: 0;
padding: 0;
overflow: hidden;
}
/* Unternavigation ausblenden */
ul#Navigation a:hover {
color: black;
background-color: silver;
}

ul#Navigation li ul li {
position: relative;
background-image: url(/quadrat6.png);
background-repeat: no-repeat;
background-color: white;
text-align: left;
left: 0em;
top: 0em;
margin: 0;
float: none;
}

ul#Navigation li ul li ul {
z-index: 999;
position: absolute;
top: 0em;
left: 10em;
text-align: left;
width: 16.6em;
margin: 0;
float: none;
height: 0;
overflow: hidden;
}
Kein Problem, dachte ich, und gab der zweiten Stufe ebenfalls einen hohen z-index, aber kleiner als der der dritten Stufe. Neues CSS:
Code:
ul#Navigation li ul {
z-index: 998;
background-color: transparent;
margin: 0;
padding: 0;
overflow: hidden;
}
/* Unternavigation ausblenden */
ul#Navigation a:hover {
color: black;
background-color: silver;
}

ul#Navigation li ul li {
z-index: 998;
position: relative;
background-image: url(/quadrat6.png);
background-repeat: no-repeat;
background-color: white;
text-align: left;
left: 0em;
top: 0em;
margin: 0;
float: none;
}

ul#Navigation li ul li ul {
z-index: 999;
position: absolute;
top: 0em;
left: 10em;
text-align: left;
width: 16.6em;
margin: 0;
float: none;
height: 0;
overflow: hidden;
}
Aber obwohl der z-index kleiner ist, überdeckt jetzt die zweite Stufe die dritte teilweise. Zu sehen hier:
http://www.ulrichbangert.de/orchid/mediaelement/2013-03-25_Pleione_Ueli_Wackernagel_Pearl_zindex.php
wenn man über die Menüpunkte unter "Blumen und Pflanzen" geht und die dritte Stufe aufklappt .
Kann mir jemand erklären, warum das so ist und wie ich es beheben kann?
Viele Grüße - Ulrich
 
Werbung:
Ist ein etwas merkwürdiger Aufbau, aber gibt doch nicht

Code:
ul#Navigation li ul li

sondern

Code:
ul#Navigation li ul li:hover

den z-index. Dann wirkt er nur bei dem gehoverten Element, wodurch wiederum nachfolgende Elemente das aktuelle Submenü nicht überlagern können.
 
Nein, das geht leider nicht, weil es auch bei der mobilen Version funktionieren muss und dort werden die Untermenüs durch Klick bzw. Touch geöffnet.
 
Werbung:
Gibt dem #menu02 noch
Code:
position: relative;z-index: 1;
dann klappt es bei mir zumindest.
 
Werbung:
Zurück
Oben