It’s hard to describe, but one thing lacking in most horizontal CSS menus is a persistent hover state for the top level element.
Let me explain – say you hover over the tab “About Us”, and it is supposed to drop down to show other items in that section. When you move the mouse down to hover over these items, personally, I feel the hover state of About Us should stay on to indicate that you’re in that section.
Unfortunately, almost all CSS menus don’t do this. I found one that does, however – Here it is:
http://www.venturelab.co.uk/devblog/2010/06/creating-a-pure-css-dropdown-menu/
The key bit of code is excerpted here:
#nav li:hover a{ /* Set styles for top level when dropdown is hovered */
background:#6b0c36; /* Solid colour fall-back */
background:rgba(107,12,54,0.75); /* It’ll look nice semi-transparent */
text-decoration:underline;
}
This gets tricky, but it should make sense.
This block of code here is where the hover styles come in, there’s a bit of nifty code in there which controls what we’ll call ‘persisting hover states’ on the top level item even when the user is hovering the dropdown items…#nav li:hover a is what allows you to give the top level link a persisting hover state when hovering its ‘children’. This works by styling every link inside a list-item when that list-item is hovered.