サイトのメイン ナビゲーションとして機能する小さな水平バーがすぐ下にあるヘッダーがあります。ウィンドウがフルサイズの場合、完全に機能します。しかし、ウィンドウのサイズを少しでも小さく変更すると、フロート要素の動作が予想されるように、右端のメニューが次の行に移動します。
質問: ナビゲーション バーが常に 1 行に表示され、ウィンドウ サイズに合わせて適切にサイズ変更されるようにするにはどうすればよいですか? 長さをパーセンテージに変更してみましたが、CSS には多くのコンポーネントがあるため、これはしばしば問題を引き起こします。
関連するすべてのコードは次のとおりです。http://jsfiddle.net/HSVdg/1/
主な原因は次のとおりですが、間違っている可能性もあります。
.menu2 li {
position: relative;
float: left;
width: 150px;
z-index: 1000
}
上記のリンクに関するいくつかのメモ:
ドロップダウン機能(コメントに記載されているJSおよびCSSの形式)にTiny Drop Down 2(http://sandbox.scriptiny.com/tinydropdown2/)を使用していますが、ドロップダウンは実際には機能していませんjsfiddleで。すべてのJSが私の質問とは無関係であると確信しています。
ボタンは実際のバーと垂直に並んでいませんが、実際のサイトでは発生していないため、これは主な問題ではありません.
jsfiddle のウィンドウ サイズは、実際にはボタンの全長に対応していないため、ボタンが次の行に移動するという問題がすぐにわかります。
どんな助けでも大歓迎です!