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

I have a drop down menu in only CSS and no JAV开发者_运维百科ASCRIPT 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

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.

For me it worked like this, without the >:

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

You're currently setting the hover state on the A tag, you need to (also) set it on the LI tag. When you are over a child UL, you are no longer over the A, but you are still over the LI. Try this:

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