0

我有一个三级菜单。进入站点时，除一级菜单外，所有级别的菜单都应隐藏。悬停在 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 上查看

您的其中一个ul已style="display: none;"对其进行内联...如果您想显示它，请摆脱它。在 JSFiddle 上查看该编辑。

于 2012-12-27T14:53:09.020 回答