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;