Question

我几周来一直在努力解决这个问题，并且真的很想找到这个CSS问题的解决方案。如果它甚至可能，当父项处于活动状态时如何使子菜单保持可见？

CSS可以很好地使用：hover属性，但无法弄清楚如何使子菜单块保持可见：active。

<nav id="menu" role="navigation">  
    <?php wp_nav_menu(); ?>
</nav><!-- #menu -->

#menu ul li:hover ul.sub-menu,
#menu ul li:hover ul.sub-menu li,
#menu ul li:hover ul.sub-menu li a { display: block; }

非常感谢一些帮助或任何想法，所以如果只能通过CSS解决这个问题，我不会浪费更多时间来解决这个问题。

问候，Bellisia

编辑：

<nav id="menu" role="navigation">  
    <div class="menu-headmenu-container">
        <ul id="menu-headmenu" class="menu">
            <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item menu-item-17">
                <a href="http://yyy.com/">Home</a>
            </li>
            <li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15">
                <a href="http://yyy.com/services/">Services</a>
                <ul class="sub-menu">
                    <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20">
                        <a href="http://yyy.com/contact/">Contact</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav><!-- #menu -->

Answer 1

当您点击说联系人（子导航项目）时，（* current_page_item *）类应该应用于那个li？

在这种情况下，你能不能只使用..

#menu ul li ul.sub-menu li.current_page_item { display: block; }

表示它正在使用并在该页面上显示为块？

Answer 2

你将不得不玩子菜单的定位，但这里是一个小提琴，显示如何只使用CSS。当您将鼠标悬停在链接2上时，您会看到一个子项<ul>显示为三个链接。

http://jsfiddle.net/ryancowles/63XBy/

Answer 3

您正在寻找“儿童组合器”选择器，请尝试以下CSS。

.current_page_item > ul { display: block; }

唯一需要注意的是，“儿童组合器”选择器将只选择一个级别的子级，因此它不适用于嵌套的子菜单。

HTH

P.S：我在这里假设您已经设置了Wordpress将“current_page_item”类应用于单击的父菜单项。

Answer 4

经过无数个小时，我意识到我没有使用＆gt;正确，这是它最终看起来像：

#menu ul.menu > li.current_page_item > ul.sub-menu { display: block; }

像魅力一样！但这只适用于父母，我不能让子菜单项在点击时保持可见，任何想法？

WordPress中子菜单上的活动属性

4 个答案: