子菜单链接激活时突出显示Wordpress父菜单项

时间:2016-01-26 19:40:46

标签: css wordpress drop-down-menu menu

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

选择子菜单项时,我需要突出显示ACTIVE PARENT MENU ITEM。

问题是,每当我通过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>

1 个答案:

答案 0 :(得分:2)

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

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