Hovermenü berechte automatische Maße falsch

[stefanv]

Hallo Zusammen,

ich arbeite aktuell an einer horizontalen Navigation mit Hover ab der zweiten Ebene. Die erste Ebene ist immer sichtbar, alle anderen Ebenen erscheinen per hover horizontal darunter.

Demo -> http://jsfiddle.net/gd4y1ezr/20/

Wenn alle height auf auto stehen wird die zweite Ebene in zwei Zeilen aufgeteilt und eine Scrollbar angezeigt. Ich habe bei

#header .mod_navigation li:hover .level_2

die height fest auf 200px eingestellt und errstmal sieht alles gut aus. Jedoch nur solange die Linknamen in der dritten Ebene kurz genug sind. Wird der Text länger, reicht der Platz nicht und die Links stehen untereinander.

Woran liegt das? Ich kann mir das nur so erklären das der Container für die zweite Ebende bei hover berechtnet und angezeigt wird und wenn dann der Container für Ebene Drei in Spiel kommt, Ebene zwei nicht neu berechnet wird und die Drei halt entweder in den vorhandenen Platz passt, oder gescrollt werden muss.
Wenn das so ist, wie lässt sich das abstellen? Gibt es einen Weg die Container neu berechnen zu lassen? Oder muss ich andere Wege gehen? Das Design wird mir zum Gück nicht vorgegeben, ich kann also umschwenken. Nur drei Ebenen müssen mind. vorhanden sein.

gruß
Stefan

[tab]

Ich habe die height beim hover über level_1 (#header .mod_navigation li:hover .level_2) wieder auf auto gestellt und overflow auf visible statt auto. auto erzeugt hier bei unzureichendem Platz eine Scrollbar, visible lässt die Darstellung ausserhalb zu.
http://jsfiddle.net/gd4y1ezr/21/

[stefanv]

Ich muss mir echt mal die CSS Referenz unters Kopfkissen legen. Vielen Dank für den Hinweis. Hätte ich auch selber drauf kommen können...
Das die dritte Ebene nicht links floatet, habe ich mit

/*Ebene bei mouseover anzeigen*/
#header .mod_navigation .level_2 li:hover .level_3 {
  left: -1px;
}

erledigt. In wie weit das die beste Lösung ist weiß ich nicht, aber es funktioniert. Wenn dazu jmd. eine elegantere Lösung hat, immer her damit

gruß
Stefan aka Ich hasse CSS...