如何在子页面的子项上突出显示顶部菜单项?

时间:2016-09-30 00:56:54

标签: css wordpress drop-down-menu navigation highlight

当我在3级子页面上时,我正试图让顶层菜单项保持突出显示但是当我使用当前页面 - 祖先类时,我只会突出显示一个级别。

(见下文)

我想要发生什么(所有菜单家长突出显示):

- Home 
- **Photos** 
  - **Album1** 
      - **Gallery1** (Current Page)
  - Album2

我目前拥有的内容(仅突出显示一个级别的父级):

- Home 
- Photos
  - **Album1** 
      - **Gallery1** (Current Page)
  - Album2
当我在“Gallery1 Page”上时,

HTML:

<ul id="menu-menu-english" class="nav">
  <li id="menu-item-224" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-224">Home</li>
  <li id="menu-item-158" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor menu-item-has-children menu-item-158 dropdown"><a title="Research" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Research /a>
     <ul role="menu" class=" dropdown-menu">
       <li id="menu-item-384" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor menu-item-384">Pre – 1975</li>
       <li id="menu-item-383" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-383">1975-1990</a></li>
     </ul>
   </li>
 </ul> 

CSS:

.current-page-ancestor {
   background-color:red;

}

1 个答案:

答案 0 :(得分:0)

您的代码不清楚。也许它不起作用,因为你的parent已经有了背景风格。尝试添加!important以覆盖以前的样式。

.current-page-ancestor {
       background-color:red !important;
}