私はこれに基づいてメニューを実装しています：
http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx
（デモ）
メニューは、適切なレンダリングのためにUL/LI構造とCSSを使用します。
問題は、ブラウザの幅が十分でない場合、メインメニュー項目が折り返されることです。
メニューをDIVで囲みました。
応募するとき
overflow-x: auto;
そのDIVに対して、メニュー項目の上にマウスを置くと、DIVの周りにスクロールバーが表示されます（おそらくドロップダウンメニューに対応するため）。
ドロップダウンメニューを保持したまま、DIVが折り返されるのを防ぐにはどうすればよいですか？
私が考えることができる最善の解決策は、ジョナス・パーソンの回答のコメントで提案されているものです。を使用してwhite-space: nowrapいます。ただし、これが機能するには、メニューの要素を水平方向に整列するdisplay: inline-block代わりにを使用する必要があります。float:left/right
Chrome の Web 開発者を使用してデモをいじり、動作させました。
float: lefteveryをdisplay: inline-blockAdd font-size: 0to に置き換えてul#menu上書きするだけです。これが使用ul#menu liしfont-size:12pxているサイズです。（を使用display: inline-blockすると、ブロック間に空白が追加されます。それfont-sizeが処理されます。）
次に、インライン ブロックがコンテナーの上部に垂直に配置されていることを確認します - に追加vertical-align: topしliます。
最後に、whitespace: no-wrapを div ラッピングに追加しul#menuます。それでおしまい。
次のように、固定幅を div タグに追加するだけです。width: 700px;