IE7で動作する縦向きのネストされたCSSメニューを構築する

Question

CSSを使用して（ホバースタイルを適用するJS）、水平ドロップダウンメニューを構築する最良の方法は何ですか？

私はメニューhereを採用しようとしていますが、私が望む位置付けを達成することはできません。私がこれを試みるたびに、私はそれがもはや扱いにくいほど多くのCSSクラッシュを巻き起こします。

DOM：

<nav> 
    <ul> 
    <li> 
     <a href="#">Heading 1</a> 
     <ul> 
     <li><a href="#">1</a> 
       <ul><li>a</li><li>b</li></ul> 
     </li> 
     <li>2</li><li>3</li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Heading 2</a> 
     <ul><li>1</li><li>2</li><li>3</li></ul> 
    </li> 
</nav> 

所望の出力：

、上部ヘッダは、ヘッダの左側に水平に各ヘッダラインアップの下に最初のメニュー完全に水平ですさらに下位のすべてのサブメニューは、水平に右上に、垂直に上に並んでいます。この基本的なアイデアを構築するにはどうすればいいですか？

Answer 1

自分で作成することはできましたが、十分かどうかはわかりません。私はむしろあなたがjQuery UI Development & Planning Wiki > Menuページを見ることを示唆したいと思います。このページにはいくつかのメニューがあります。

また、開始点として役立つドロップダウンメニューを作成するためのthis is a very simple script。

編集

ダイナミックCSSポップアップメニューを作成するには、（ⅰ）あなたは（ⅱ）ことはできません「ホバー」イベントを活用し、動的にサブメニューを配置する必要が主な理由は、jQueryのサポートが必要になりますCSSのみのソリューションで。

1. あなたのメイン・メニュー<ul>は
2. サブメニューが含まれているあなたの<li>のすべてposition: staticがposition: relative
3. あなたのサブメニュー<ul>のすべてがposition: absoluteとdisplay: noneする必要がありますする必要がありますする必要があります。

サブメニューを含むすべての<li>要素にhoverイベントを実装できます。ホバリング時には、まず<li>の中にネストされた<ul>を配置し、それを表示します。ホバーイベントは、そのエレメントが「解放されていない」ときに起動するイベントも提供します。この場合、対応する<ul>を隠すだけです。簡単？

ちょうど含む<li>の幅を取得し、あなたが表示しようとしている<ul>にleft: XXXpx; top: 0を設定し、サブメニューである<ul>を配置します。サブメニューを<li>の下に表示する場合は、<li>の高さをつかんで<ul>にleft: 0; top: YYYpxを設定します。絶対相対的な組み合わせは、そのような種類の位置決めを可能にする。

この時点で、「エッジ検出」の実装を検討することもできます。これは、メニューがビューポートの右端または下端を通過するかどうかを確認することです。かなりトリッキー。

IE7では、メニューのレンダリングに問題があります（また、ホバーイベントがトリガーされる）ことに注意してください。これに対処するには、サブメニューにz-インデックスを設定することができます。