PURE CSS DROP DOWN MENU - Unable to keep top 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.

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

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;

Answer 3

For me it worked like this, without the >:

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