Как выделить верхний пункт меню, когда на дочерней странице?

Я пытаюсь, чтобы верхний элемент меню оставался подсвеченным, когда я нахожусь на дочерней странице уровня 3, однако я получаю только один уровень вверх, когда я использую класс текущей страницы-предка.Как выделить верхний пункт меню, когда на дочерней странице?

(смотри ниже)

То, что я хочу, чтобы это произошло (Все меню Родители подсвечена):

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

То, что я в настоящее время есть (только один уровень выше родительского подсвечивается):

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

HTML, когда я на "gallery1 Страница":

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

}

источник

2016-09-30 emcee

Вы должны посмотреть на свои определения 'css'. Потому что вы не публикуете никаких «html» (что вам нужно), я не могу догадываться. – Franco

Я не хотел размещать HTML-код, потому что многие классы css генерируются Wordpress и довольно запутанны. Но я думаю, что .current-page-ancestor - эффективный класс css. Однако, когда я определяю его, выделяется только родитель второго уровня, хотя оба родителя имеют этот класс. – emcee

Это не имеет никакого отношения к имени класса, но больше о селекторах элементов. – Franco

Ваш код не ясно. Возможно, это не работает, потому что у вашего parent уже есть стиль фона. Попробуйте добавить !important, чтобы переопределить предыдущий стиль.

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

источник

2016-09-30 03:06:18

Как выделить верхний пункт меню, когда на дочерней странице?

ответ

Смежные вопросы