Verschachtelte CSS Navigation spinnt bzw. wird nicht richtig angezeigt

Gleich mal ein Bild von der Darstellung, wie die Navigation mit Contao angezeigt wird:

https://dl.dropboxusercontent.com/u/...schachtelt.png

Und bei jsfiddle habe ich die Navigation mal gebaut, wie ich sie mir vorstelle:

http://jsfiddle.net/xjvgaere/12/

und dort funktioniert die auch, soweit.

Mein Problem ist jetzt, warum das CSS in Contao nicht richtig funktioniert:

Code:

---

/*
        Main Navigation
 */

#header nav.mod_navigation ul {
        margin-left:-39px;
}

#header nav.mod_navigation li {
        list-style:none;
        float:left;
        margin-right:20px;
}

#header nav.mod_navigation li a {
        color:#b8fcd4;
        text-decoration:none;
}

#header nav.mod_navigation li a:hover,
#header nav.mod_navigation li .active {
        color:#81bb8f;       
}

/*2. Layer Main Navigation*/

#header nav.mod_navigation li ul {
        display:none;       
}

#header nav.mod_navigation li:hover ul {
        display:block;
        position:absolute;
        top:30px;
        background-color:blue;
        /*z-index:2000;*/
}

#header nav.mod_navigation li ul li {
        float:none;
}

#header nav.mod_navigation li ul li a {

}

/*3. Layer Main Navigation*/

#header nav.mod_navigation li ul li ul {
        display:none !important;
}

---

Das ist der CSS-Code den ich in Contao direkt verwende? – Ich weiß nicht direkt was ich falsch mache, weil sonst hatte das immer tuffig funktioniert???

Aus deinem Mini-Screenshot werde ich leider nicht schlau. Was ist da das Problem? Ist die Navi unten abgeschnitten oder was? Wie sieht denn das HTML aus?
Wenn es ein ganz normales Navigationsmodul von Contao ist, dann liegt es vielleicht daran, dass dem nav die Klasse block zugewiesen ist. Dadurch ist overflow:hidden; gesetzt, was dann unter Umständen (wenn sich die Navigation nicht nach unten vergrößern kann) dazu führt, dass eben alles unten abgeschnitten ist. Versuch mal das:

HTML-Code:

---

#header nav.mod_navigation {
        overflow:visible;
}

---

Zitat:

---

Zitat von tab

Aus deinem Mini-Screenshot werde ich leider nicht schlau. Was ist da das Problem? Ist die Navi unten abgeschnitten oder was? Wie sieht denn das HTML aus?
Wenn es ein ganz normales Navigationsmodul von Contao ist, dann liegt es vielleicht daran, dass dem nav die Klasse block zugewiesen ist. Dadurch ist overflow:hidden; gesetzt, was dann unter Umständen (wenn sich die Navigation nicht nach unten vergrößern kann) dazu führt, dass eben alles unten abgeschnitten ist. Versuch mal das:

HTML-Code:

---

#header nav.mod_navigation {
        overflow:visible;
}

---

---

Genau das war abgeschnitten, aber mit Deinem Tipp habe ich das Problem schon gelöst. Super, auch Deine Erklärung ist nochmal hilfreich gewesen.

Vielen Dank @tab! So einfach kann manchmal die Lösung sein ... :eek: