WordPress子菜单上的活动属性答案

【问题标题】：Active property on sub-menu in WordPressWordPress子菜单上的活动属性
【发布时间】：2015-11-25 10:03:46
【问题描述】：

我已经为这个问题苦苦挣扎了好几个星期了，我真的很想找到这个 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 无法解决此问题，我不会浪费更多时间尝试解决此问题。

问候，贝利西亚

编辑：

<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 -->

【问题讨论】：

@StephenHarris 这就是我们的 close 票（离题）或 flag（移至 SO）。
我认为这是因为它适用于我合作过的其他项目，所以我认为它一定与 WordPress 有关，并且某些东西阻止了活动属性。再说一次，我是 WordPress 新手。
顺便说一句，谢谢你为我指出正确的方向，我的问题现在放在 StackOverflow 上！ :)
@Kaiser - 我知道，我标记了它，但我想我会让 Bellisia 意识到它。
我现在知道了，但仍然认为它与 WordPress 相关，如果我不这么认为，我不会在这里问它。

标签： css wordpress submenu

【解决方案1】：

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

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

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

这表明它正在使用并在该页面加载时显示为块？

【讨论】：

我试过了，但没有激活它。由于我已经在使用 :hover 它再次消失。

【解决方案2】：

您将不得不使用子菜单的定位，但这里有一个小提琴，展示了如何仅使用 CSS 来做到这一点。当您将鼠标悬停在链接 2 上时，您会看到一个子 <ul> 出现了三个链接。

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

【讨论】：

【解决方案3】：

“Child Combinator”选择器就是您要找的，试试下面的 CSS。

.current_page_item > ul { display: block; }

唯一需要注意的是，“子组合器”选择器只会选择一层深的子级，因此它不适用于嵌套的子菜单。

HTH

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

【讨论】：

我也试过了，但是没用。我猜这是因为我正在使用悬停效果。我只需要它停留在那里，它就会被点击。

【解决方案4】：

经过无数小时后，我意识到我没有正确使用 >，它最终看起来是这样的：

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

像魅力一样工作！但这仅适用于父母，我无法让子菜单项在单击时保持可见，有什么想法吗？

【讨论】：