PURE CSS DROP DOWN MENU - Невозможно удерживать верхнюю <li>выделенной при наведении курсора на подменю

Question

У меня есть раскрывающееся меню только с CSS и без JAVASCRIPT, и у меня возникла проблема с выделением верхней части (элемента главного меню) при наведении курсора на элементы подменю. Вы можете увидеть меню здесь http://www.codedecks.com/cssnav.html.

Если вы наведите курсор мыши на «Дети» и переместите курсор вниз, как только над надписью «Девушки» верхняя часть «Дети» потеряет подсветку.

Любое предложение будет с благодарностью! Заранее спасибо

Answer 1

Измените #nav > li a:hover на #nav > li:hover a в вашем CSS.

Поскольку скрытый ul второго уровня отображается при наведении верхнего уровня li, имеет смысл иметь a верхнего уровня для одновременного получения стиля наведения. Когда вы наводите указатель мыши на ссылки меню второго уровня, a по-прежнему выглядит активным. li:hover применяется даже при наведении указателя мыши на дочерние элементы li, даже если они расположены так, что выглядят так, как будто они находятся вне поля li.

Answer 2

Для меня это работало так, без >:

#navigation li:hover a {
  background-color:#012A5E;
  color:#F1F1F1;
}

Answer 3

В настоящее время вы устанавливаете состояние наведения на тег A, вам необходимо (также) установить его на тег LI. Когда вы находитесь над дочерним UL, вы больше не находитесь за A, но вы все еще за LI. Попробуйте это:

#nav li hover {
background-color:#F4F4F4;
color:#543056;