ナビゲーションサブメニュー（UL）が浮動しているように動作しないようにしますか？

Question

私は、並べ替えられていない小さなリストのグループで構成された順序付けられていないリストを持つnavを構築しました。これらの要素には "subnav"というクラスが与えられています。

ナビゲーションを小さな画面で表示すると、ナビゲーションが「折りたたまれ」、メニューの重ねが上に表示されます。私が望むのは、画面が変わったときに形状を変えずにナビゲーションを「完全性」に保つことです。ここで

はjsfiddleです：あなたはjsfiddle内のウィンドウのサイズを調整した場合http://jsfiddle.net/Cyc4n/

あなたは周りのメニュー踊りを見ることができます - どのように私はまだしてそのままそれを維持するのですか？

任意の方向が大幅にあなたは彼らの親、.navigation（またはより良いtable-rowその親のために、後者の親のためのtableため.subnavためdisplay: table-cell;とdisplay: table;を使用することができます

Answer 1

を高く評価したが、それはすでにそのように動作します。ここでは））
フィドルです：http://jsfiddle.net/Cyc4n/1/

編集：私の例では、私がtable-layout: fixedとロゴの右側に大きなパディングを追加しました。あなたの商品を正確に管理したい場合は、例としてそこにあります。ブラウザでアイテムの幅を管理する場合は、両方を削除してください。

CSS3 Flexible Box Layoutを使用することもできますが、そのサポートはCSS2 display: table;より悪いです！ Media QueriesをサポートしているブラウザでもFlexboxをサポートする必要があります（これはレスポンシブデザインのデスクトップを最初に使用したもので、最初はモバイルではありません）。
EDIT2：display: table*;のサポートはIE8 +です。あなたは既にIE7の代替手段を持っています - inline-block;

Answer 2

.navigation{min-width:900px;}を使用すると、少なくとも900pxの幅でナビゲートできるようになります。これは、浮動動作を防止します。実際の金額は、フォントサイズ、ボーダー/パディング/マージン値、ブラウザ固有のマージン（リセットしなかった場合）によって異なります。相対値（emなど）を使用している場合は、emをmin-width:...にも使用してください。