0

私は3つのレベルのメニューを持っています。サイトに入るときは、レベル1を除くメニューのすべてのレベルを非表示にする必要があります。レベル1にカーソルを合わせると、すべてのサブメニューが表示されます（レベル2とレベル3の両方）。

私のメニューは次のようになります。

http://jsfiddle.net/3Whn6/1/

<ul class="nav">
<li id="menu-item-60" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60 actives hover"><a href="#/?page_id=37">CHAPTERS</a>
<ul class="sub-menu" style="display: block;">
    <li id="menu-item-77" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-77 arrow hover"><a href="#/?product_cat=one">ONE</a>
    <ul class="sub-menu" style="display: none;">
        <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-76 hover"><a href="#/?product=test">ROMAN NET</a></li>
        <li id="menu-item-80" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-80 hover"><a href="#/?product=white-shadow">WHITE SHADOW</a></li>
        <li id="menu-item-81" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-81 hover"><a href="#/?product=armor">ARMOR</a></li>
    </ul>
    </li>
    <li id="menu-item-83" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-83 arrow hover"><a href="#/?product_cat=two">TWO</a>
    <ul class="sub-menu" style="display: block;">
        <li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-85 hover"><a href="#/?product=coming-soon">coming soon</a></li>
    </ul>
    </li>
</ul>
</li>
</ul>

私が思いついたCSSは現在これです：

ul.nav li > ul > li { display: none }

これにより、サイトはトップレベルのみを表示します。

ホバーで他のすべてのレベルを展開し、ホバーを解除するときにそれらを再度削除するにはどうすればよいですか？

4

1 に答える 1

0

最も単純な形では、

    ul.nav li > ul > li { display: none; }
​    ul.nav li:hover li { display: block; }
    ul.nav > li { background-color: #eee; }

JSFiddleで表示

あなたの1人がそれにインラインulをstyle="display: none;"設定しました...あなたがそれを見せたいのならそれを取り除いてください。JSFiddleでその編集を表示します。

于 2012-12-27T14:53:09.020 に答える