gassmonkey
@gassmonkey
Провокатор

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

Имеется двухуровневое меню. Пункты обоих уровней имеют стиль для нажатия. Но при клике на пункт дочернего списка, пункт-родитель тоже меняет стиль на активный. Как от этого избавиться с помощью только css? Чтоб клик на ребёнке не влиял на родителя?
  • Вопрос задан
  • 251 просмотр
Решения вопроса 1
@glenean
Возможно, у Вас второй уровень меню (возможно ul) вложен в тег первого уровня меню (возможно li),
а для первого уровня меню li, назначено состояние :active. Тогда нужно либо:
1) Извлечь второй уровень меню (возможно ul) из первого уровня li
2) Назначить состояние :active, самой ссылке первого уровня меню.

Вообще, лучше, разместите код на codepen.io/pen
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@fynivx
Software Engineer ( .NET )
В 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 или типа того )
Можно еще немного оптимизировать и вообще не делать класс для последнего.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы