CSS CSS Menü - Submenü durchsichtig und überlappt Mouseover Effekt

[Natheedo]

Hallo,

ich setze mich gerade mit einem Problem auseinander bei jenem ich gerade gar nicht mehr weiterkomme - Und zwar hab ich hier auf dem Template ein CSS Menü :

http://img3.fotos-hochladen.net/uploads/menup1syd8afn5.png

Dieses hat einen Mouse Over Effekt - dass wenn man mit der Maus über die einzelnen Punkte geht - Dieser grüner Balken kommt (das will ich auch so).

Nun aber hab ich zu diesem Menü eine zweite Leiste hinzugemacht (war nicht original) - Jetzt ist jedoch jenes Problem dass die Submenüs diesen MouseOver Effekt überlappen - Sprich im Submenu kann ich wie auf dem Bild gezeigt zum Beispiel Weblinks und HMPF nicht mehr auswählen weil er direkt auf den Menü Eintrag darunter springt (neben Wildstar ist noch ein Menüeintrag) und das Sub Menü verschwindet direkt. Man sieht ja auch Rahmen von dem Button im Submenü.

Beides wurde mit css realisiert also MouseOver Effekt und Submenü.

Daher die Frage : Kann man das Submenü irgendwie so gestalten, dass quasi alles im Hintergrund ignoriert wird ? Oder geht das überhaupt nicht ?

Hier der Code der css Datei :

/* Navigation */
#nav {}
#navl {}
#navr {background: url("../images/mainmenu.png") repeat-x scroll 0 0 transparent;font-family: 'jenna_sueregular';font-weight: bold;
 font-style: normal;

 font-size:29px;height: 110px;margin-top: -29px;margin-left: 1px;width: 1079px;}
#nav {z-index:10;position:relative; }
#nav-left { float:left; width:80%;}
#nav-spiele { float:left; width:80%; margin-top:8px;}
#nav-right { float:right; width:20%;}
#nav ul { margin-left: 3px; padding:0; float:left;}
#nav ul li {list-style:none;float:left;height:100%;position:relative; padding-right:1px; margin:0;}
#nav ul li a { display:block;padding:0 15px 0 15px; text-shadow: none; line-height:42px; color:#555; text-decoration:none;font-size:29px;font-weight:normal; border-radius:6px; border-right:1px solid #e1e1e1;}
#nav ul li.active {}
#nav ul li.active a, #nav ul li a:hover {color:#ccff00; text-shadow: none; background:url(../images/mainmenu-h.png) 0 0 repeat-x; }
#nav ul li:hover {}
#nav ul li ul {position:absolute;width:180px;left:-999em;border-top:0; margin:0; padding:0;}
#nav ul li:hover ul, #menu ul li.sfHover ul {left:0;}
#nav ul li ul li {padding: 0; height:auto; width:180px; margin:0 auto; border:0; text-align: left; }
#nav ul li ul li:hover ul {left:180px; top:0}
#nav ul li:hover ul li a {text-shadow:none;}
#nav ul li:hover ul li { background:none; }
#nav ul li:hover ul li a, #nav ul li ul li a, #nav ul li.active ul li a{margin:0; padding:0 0 0 10px;height:24px;line-height:24px; background:#555;border-bottom:1px solid #3a3a3a; border-right:0; color:#d1d1d1; font-size:22px;font-weight:normal;text-shadow:none; -moz-border-radius: 0px; border-radius: 0px;}
#nav ul li ul li a:hover, #nav ul li ul li.active a, #nav ul li.active ul li a:hover, #nav ul li.active ul li.active a {text-align: left; padding:0px 0 0 10px;height:24px;line-height:24px;background:#343434;color:#fff; font-size:22px;text-shadow:none;}
#nav ul li ul ul, #nav ul li:hover ul ul, #nav ul li:hover ul ul ul, #nav ul li:hover ul ul ul ul, #nav ul li.sfHover ul ul, #nav ul li.sfHover ul ul ul, #nav ul li.sfHover ul ul ul ul {left:-999em;}
#nav ul li ul li ul li{padding:0;height:auto;width:180px; margin:0 auto; border:none; text-align: left;}

Ich hoffe ich hab mich verständlich ausgedrückt und man weiß worum es mir geht.

 

[omaliesschen]

html?

 

[Kausalat]

Versuche es mit einem höheren z-index-Wert bei #nav ul li ul, sofern dies das Aufklappmenü verkörpert.

 

[Natheedo]

Versuche es mit einem höheren z-index-Wert bei #nav ul li ul, sofern dies das Aufklappmenü verkörpert.

Hm oh man, da mach ich rum wie blöd aber an z-index hab ich gar nicht gedacht .... Dass wars jedenfalls, jetzt passts, danke für den Denkanstoss, Du bist ein Genie - Vor lauter bäumen den Wald nicht mehr gesehen