Menü ab Level 2 geht nicht auf

Hallo Gemeinde,

kann mir nicht erklären, weshalb meine CSS Menü nicht funktioniert! Das Problem ist, daß das Untermenü sich beim Mouse over nicht öffnet.

Wenn ich den Navi Quelltext in eine Html Datei verschiebe und das ganze statisch probiere, klappt es einwandfrei.

Vieleicht mag sich das von Euch mal jemand anschauen, an was es liegen könnte.

Vorab besten Dank

Nutzt Du eine eigene Lösung dafür oder eine aus dem Netz?

Also, Dein CSS ist etwas verwirrend, weil Du z.B. einerseits den Selektor ">" verwendest, dann aber für's Menü umständliche Sachen machst, um ihn zu vermeiden. Falls Du den IE6 nicht unterstützen möchtest: nimm den Selektor, sonst nicht.

Ansonsten zur CSS-Lösung:
Davon abgesehen, dass ich das anders lösen würde, behaupte ich einfach mal dass folgendes auf jeden Fall fehlt:

Code:

---

#menu ul>li { overflow: hidden; }
#menu ul>li:hover { overflow: visible; }
#menu ul>li:hover>ul { position: relative; z-index: 7; top: 0px; left: -1px; }

---

Das sollte Dir zumindest das drunter liegende irgendwo in der Nähe vom Menüpunkt in den Vordergrund holen. :)

Das Menü ist von stu nichols, an mein Layout angepasst.

Danke dir fürs anschauen, werde deine Infos ausprobieren.


Edit:

Funktioniert auch nicht so, wie ich mir das Menü vorstelle.

Ich versteh auch nicht wieso es statisch einwandfrei funktioniert. Hab mal den Link dazu angehängt, damit man sieht, was es machen soll.


Hab auf der org. Seite auch nochmal das Headerbild rausgenommen.

Also mit Firebug erscheint zumindest mal das Menü bei folgendem Code

Code:

---

#menu {height:145px; width:200px; position:relative;padding-top:61px;z-index:100; overflow:visible;}

#menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; padding:1px 1px 0 1px; background:#fff;border-bottom:1px solid #cccccc; width:198px;}

#menu li {margin:0; padding:0; list-style:none;}
#menu li {display:inline;}
#menu ul ul {position:absolute; left:-9999px;}
#menu ul.level_1 {position:absolute; left:0; top:0;}

#menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#666; line-height:20px; text-decoration:none;padding:0 20px 0 10px;border:1px solid #cccccc; border-width:1px 1px 0 0; }
#menu li.submenu {background: url(../../gfx/arrow.gif) no-repeat right top;}

#menu li a:hover {color:#2890D9;}
#menu li:hover > a {color:#2890D9;}

#menu ul li:hover > ul {left:100%; margin-top:-23px; margin-left:-1px;}

#menu a:hover ul,#menu a:hover a:hover ul, #menu a:hover a:hover a:hover ul {left:100%;}
#menu a:hover ul ul, #menu a:hover a:hover ul ul {left:-9999px;}

#menu table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-7px; margin-left:-1px;}

---

allerdings passt das dann noch nicht ganz von der Platzierung her, aber ich denke das schaffst Du?

Danke fürs drüberschauen, habs am laufen!