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

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;