Как отменить :active состояние для родительского пункта меню при клике на дочерний?

Question

[gassmonkey]

Имеется двухуровневое меню. Пункты обоих уровней имеют стиль для нажатия. Но при клике на пункт дочернего списка, пункт-родитель тоже меняет стиль на активный. Как от этого избавиться с помощью только css? Чтоб клик на ребёнке не влиял на родителя?

Answer 1

[glenean]

Возможно, у Вас второй уровень меню (возможно ul) вложен в тег первого уровня меню (возможно li),
а для первого уровня меню li, назначено состояние :active. Тогда нужно либо:
1) Извлечь второй уровень меню (возможно ul) из первого уровня li
2) Назначить состояние :active, самой ссылке первого уровня меню.

Вообще, лучше, разместите код на codepen.io/pen

Comments

[gassmonkey]

Да, уже сам пришёл к решению с присвоением :active состояния ссылке, а не пункту списка. Тем не менее, за ответ спасибо.

Answer 2

[Вячеслав Онуфриюк]

В CSS нет селекторов для указания стиля контейнера относительно контента.
Боюсь, придется выносить дочерний список из родителя в какой-то общий контейнер.
Вот так, например:

<div class = "menu-item-container">
    <div class = "menu-item"> Parent </div>
    <div class = "menu">
        <div class = "menu-item-container">
            <div class = "menu-item"> Child 1 </div>
        </div>
        <div class = "menu-item-container">
            <div class = "menu-item"> Child 2 </div>
        </div>
    </div>
</div>

Ну, если меню гарантированно двухуровневое, на втором уровне можно попробовать и без контейнеров обойтись.

А вообще это не будет смотреться так уродливо, если контейнер обозвать menu-item, а сам menu-item - menu-item-text или типа того )
Можно еще немного оптимизировать и вообще не делать класс для последнего.