このメニューを IE7 で動作させようとしています。これ以外のすべてのバグをつぶしました。リスト アイテムにカーソルを合わせると、ドロワー内で飛び出す UL が隣り合って適切にフロートしません。Chrome でページを見ると、それが以前に CSS を設定していた方法です (インライン ブロックを表示するなど)。それもうまくいかなかったので、左に浮かせてみました。
Floating left は、各 li の左側にある余分なテキスト インデントで発生した問題を修正しましたが、ul はまだ適切にフロートしません。
誰にもアイデアはありますか？
コードをやり直して、できるだけ多くの > セレクターを削除してください。彼らはすべてを対処するのをはるかに困難にしています。これは、すべてに id を与えるようなものであり、オーバーライドするものがどんどん長くなります。正直なところ、最初のliをヘッダーのように見せているが、意味的には他のすべてのリンクと変わらないため、単なるメニューではなくサブdivを使用します。内部にリンクを含む実際のヘッダーは、よりセマンティックな意味を持ちます。たとえば、tools というリンクがあり、残りの兄弟リンクは ... tools です。
とにかく、物を浮かべるときは、幅に注意してください。幅がまったく宣言されていない要素がたくさんあります。IE では、フロートを使用すると、これが重要になります。サブ div の幅 (必要に応じて em にすることもできます) を設定してから、内部のフローティング ul 子の幅を設定します。それらを合わせた幅が 100% になることはありません。たとえば、div の幅が 140 ピクセルの場合、幅が 70 ピクセルの 2 つのフローティング ul を内側に配置しようとしないでください。これは収まるはずであり、ほとんどのブラウザに収まるはずです。
ご覧になりたい場合は、いくつかのメガ メニューの例がありますが、すでに多くのものがあり、サブメニュー内にフローティング UL があるものはないと思います。