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.