Многоуровневое меню навигации

Моя навигация работает почти так, как я хочу. Единственная проблема, которую я не могу понять - это маленькая стрелка, которую я использую в субнаве, что указывает на то, что он содержит субнав другого уровня.

ul#css3menu ul span {
    background-image: url("images/arrowsub.png");
    padding-right: 28px;
}
ul#css3menu ul span:hover {
    background-image: url("images/arrowsubhover.png");
    padding-right: 28px;
}

Когда вы наводите курсор на каждый субнап со стрелкой, он загружает изображение стрелки другого цвета, чтобы сохранить контраст с цветом фона, который изменяется при наведении курсора.
Проблема в том, что при наведении указателя мыши на субнав следующего уровня стрелка переключается назад, а цвет фона остается неизменным (как и должно быть).

Почему цвет фона родительского li не теряет свои правила наведения, а стрелка делает?

Вы можете увидеть поведение и код с этой JS Fiddle

Источник

2 ответа

Решение

В вашем случае лучше назначить состояние наведения в главном контейнере элемента списка, а не просто указывать конкретный элемент в вашем элементе списка меню. В вашем случае измените строку 196 на js fiddle на .submenu li:hover span, Даже если вы переместитесь на уровень глубже, чтобы получить доступ к дочернему элементу меню, по умолчанию вы все еще зависаете над родительским элементом.

Плюс это хорошая практика, чтобы не использовать идентификаторы при моделировании. Идентификаторы обычно зарезервированы для Javascript.

Источник

Похоже, правило, которое влияет на цвет фона при наведении ul#css3menu ul li:hover>a

поскольку ul#css3menu ul li:hover обнаруживает зависание над любым li элемент, который является потомком ul#css3menu ulи подменю 2-го уровня также состоит из lis, состояние наведения для 1-го уровня li поддерживается при наведении на 2-й уровень li потому что оригинальное правило все еще действует (так как оно активно, когда вы наводите курсор мыши на любого потомка liв том числе 2-го уровня liс).

когда ul#css3menu ul li:hover это правда, стиль CSS впоследствии применяется к прямому потомку a (а не применяется к lis) чтобы дать вам полное правило ul#css3menu ul li:hover>a, Это меня немного смутило, потому что обнаружение происходит отдельно от применения стилей. Надеюсь это поможет.

Источник
Другие вопросы по тегам