PURE CSS DROP DOWN MENU - Unable to keep top <li> highlighted when hovering over sub-menu

Question

I have a drop down menu in only CSS and no JAVASCRIPT and I'm having a problem keeping the top (main menu item) highlighted when I move the cursor over the sub menu items. You can see the menu here http://www.codedecks.com/cssnav.html.

If you hover over "Kids" and move your cursor down, as soon as your over "Girls" the top "Kids" looses the highlight.

Any suggestion would be greatly appreciated! Thanks in advance

Answer 1

Change #nav > li a:hover to #nav > li:hover a in your CSS.

Since you have the hidden second-level ul being shown when the top-level li is hovered, it makes sense to have the top-level a get the hover style at the same time. When you move your mouse over the second-level menu links, the a still looks active. li:hover applies even when you mouse over the child elements of the li, even if they're positioned so that they look like they're outside of the li's box.

Answer 2

For me it worked like this, without the >:

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