css - 当子菜单链接处于事件状态时突出显示 WordPress 父菜单项

Question

我在 WordPress 中有一个简单的菜单。

当选择子菜单项时，我需要突出显示事件父菜单项。

问题是，每当我通过 current-page-parent/current-page-ancestor 执行此操作时 - 下拉列表中的所有菜单项都应用了事件样式以及父级。

有什么想法可以在不触及子菜单项样式的情况下做到这一点吗？

<ul id="menu-main" class="nav navbar-nav navbar-right">
  <li id="menu-item-249" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-249 dropdown"><a href="#">Parent Menu Item</a>
    <ul role="menu" class=" dropdown-menu">
      <li id="menu-item-251" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-251"><a href="#">Sub-menu Item</a></li>
    </ul>
  </li>
</ul>

Answer 1

WordPress 会自动向当前元素的祖先添加一些类，您可以使用它们来突出显示父元素。您可以在代码中看到 WordPress 如何添加 current-page-ancestor 和 current-menu-ancestor 类。

我建议您使用 .current-menu-ancestor，因为它适用于所有对象类型。