2-Zeilen-Menü mit CSS

Question

Es ist wahrscheinlich einfach zu implementieren, aber schwer zu benennen. Ich kämpfe um dieses Layout anzuzeigen:

<ul class='menu'> 
    <li> 
    <a>item1</a> 
    <ul class='submenu'> ... </ul> 
    <li> 
    <li><a>item2</a></li> 
</ul> 

in 2 horizontale Linien: erste Zeile ist ul.menu und zweite Zeile ist ul.submenu

Css:

ul.menu 
{ 
    position: relative; 
    height: 20px; 
} 
ul.menu li { 
    display: inline; 
} 
ul.submenu { 
    top: 20px; 
    left: 0px; 
    position: absolute; 
} 

Gibt es eine Möglichkeit um es ohne Position zu tun: absolut, so dass Menü-Container im Fluss des Dokuments ist (es gibt keine Lücke ist Untermenü nicht vorhanden)?

Answer 1

Ich habe eine jsFiddle dafür eingerichtet.

Wenn ich das Problem richtig verstehe, möchten Sie ein zweizeiliges Menü, dessen Untermenü noch im Dokumentfluss ist, so dass die Seite angepasst wird, wenn kein Untermenü vorhanden ist.

Der Haken ist: Ohne position: absolute werden die übergeordneten Elemente <li> erweitert, um das Untermenü <ul> Elemente zu enthalten. Dadurch bleiben die Menüelemente Ihrer obersten Ebene abhängig von der Breite Ihrer Untermenüelemente in einem ungeraden Abstand.

Wenn dies kein Problem ist, sollte das obige jsFiddle das Problem lösen. Wenn es ein Problem ist, dann gibt es ein bisschen mehr Arbeit zu erledigen (und ich habe noch keine Lösung).

Answer 2

Überprüfen Sie my answer here, ich denke, es ist ähnlich wie Sie wollen.

EDIT: sorry, die CSS nur Idee verpasst haben, hier ist was ich tun würde:

.submenu{ display:none;} 
li:hover .submenu{ display: block;} 

Answer 3

Verwenden Sie das folgende aktualisierte CSS. Es wird perfekt funktionieren.

ul.menu { 
    height: 20px; 
} 
ul.menu li { 
    display: inline; 
    float:left; 
} 
ul.submenu { 
    display:block; 
    margin:0px; 
    padding:0px; 
}