verhindern, dass die Navigations-Untermenüs (ULs) sich verhalten, als würden sie schweben?

Question

Ich habe ein Nav erstellt, wo ich eine ungeordnete Liste habe, die aus einer Gruppe kleinerer ungeordneter Listen besteht. Diese Elemente haben die Klasse "subnav" erhalten.

Wenn das Nav auf einem kleineren Bildschirm angezeigt wird, "kollabiert" die Navigation und der Stapel des Menüs übereinander. Was ich möchte ist, dass die Navigation ihre "Integrität" beibehält, ohne die Form zu ändern, wenn sich der Bildschirm ändert.

Hier ist ein jsfiddle: http://jsfiddle.net/Cyc4n/

Wenn Sie die Größe des Fensters innerhalb einstellen jsfiddle Sie das Menü tanzen um zu sehen - wie halte ich es nach wie vor und intakt?

Jede Richtung schätzten

Answer 1

Sie display: table-cell; für .subnav und display: table; für ihre Eltern, .navigation (oder besser table-row für ihre Eltern und table für die Eltern der letzteren, aber es funktioniert schon so verwenden könnte;))
Hier ist eine Geige: http://jsfiddle.net/Cyc4n/1/

EDIT: in meinem Beispiel, habe ich table-layout: fixed und eine große Polsterung auf der rechten Seite des Logos. Es ist dort als Beispiele, wenn Sie genaue Kontrolle über Ihre Artikel wollen. Fühlen Sie sich frei, beide zu entfernen, wenn Sie möchten, dass der Browser sein Bestes tut, um die Breite der Elemente zu verwalten.

Sie könnten auch CSS3 Flexible Box Layout verwenden, aber die Unterstützung ist schlechter als CSS2 display: table;! Obwohl es in Ordnung sein sollte, wenn Sie speziell auf "mobile" (schmale Bildschirme) mit Media Queries zielen: Browser, die Media Queries unterstützen, sollten auch Flexbox unterstützen (Responsive Design zuerst mit Desktop, nicht erst mit Mobile).
EDIT2: Unterstützung von display: table*; ist IE8 +. Sie haben bereits den Fallback für IE7- mit inline-block;)

Answer 2

Sie könnten .navigation{min-width:900px;} verwenden, um sicherzustellen, dass Ihre Navigation mindestens 900 Pixel breit ist. Dies verhindert das Floating-Verhalten. Beachten Sie, dass der tatsächliche Betrag von der Schriftgröße, den Rand-/Auffüll-/Randwerten und den browserspezifischen Seitenrändern abhängt (falls Sie sie nicht zurückgesetzt haben). Wenn Sie relative Werte verwenden (z. B. em), versuchen Sie auch, em in min-width:... zu verwenden.