質問: 動的にサイズ変更できるドロップダウン機能を備えた水平メニューを作成する最良の方法は何ですか? (または、できれば、現在のメニューを編集してそのように動作させるにはどうすればよいですか?)
説明: サイトのメイン ナビゲーションとして、細い水平のドロップダウン メニューを使用しています。ブラウザウィンドウが全幅のときは問題ありませんが、リサイズすると右端のリンクが浮かんで次の行に押し下げられます。
水平メニューは非常に一般的なものであり、動的にサイズ変更できるように作成するには、いくつかの一般的なトリックと方法が必要であることを知っています。したがって、現在のメニューを修正しようとすると負担が大きすぎる場合は、ヒントを聞いたり、より良い水平メニューを作成する方法について読んだりするだけでも問題ありません。
ここに私が主な問題になると思うものがあります：
.menu2 li {
position: relative;
float: left;
width: 150px;
z-index: 1000
}
150 ピクセルの幅をパーセンテージにするなど、このインラインと他の微調整のさまざまな組み合わせを試しましたが、テキストにあらゆる種類の配置の問題が発生します。
ここにすべてのコードを含むデモがあります: http://jsfiddle.net/HSVdg/1/
上記のリンクに関するいくつかのメモ:
ドロップダウン機能（コメントに記載されているJSおよびCSSの形式）にTiny Drop Down 2（http://sandbox.scriptiny.com/tinydropdown2/）を使用していますが、ドロップダウンは実際には機能していませんjsfiddleで。すべてのJSが私の主な質問とは無関係であると確信しています。
Tiny Drop Down は多くの CSS を使用するため、小さな tweek を作成しようとするのは非常に困難でした。
ボタンは実際のバーと垂直に並んでいませんが、実際のサイトでは発生していないため、これは主な問題ではありません.
jsfiddle のウィンドウ サイズは、実際にはボタンの全長に対応していないため、ボタンが次の行に移動するという問題がすぐにわかります。