I'm after a way to keep a top level menu item on it's hovered or active state when I'm hovering on that menu items sub menu.

An example can be found here: - Hover over 'News' menu item (BG will be dark) then navigate to the Sub Menu to appears - 'News' item will change back to it's normal state.


You've already got a declaration like so:

#nav_398484 li#menu-news a:hover {
  background: url( http://blah );

Just add another to cover the whole li tag:

#nav_398484 li#menu-news:hover {
  background: url( http://blah );

This won't work in IE6, but really, what does?

You'll have fewer declarations to track if you assign a shared class to those top-level menu li tags instead of targetting all the css to their id.

Thanks for the answer austinfromboston! I have my links in each tab set up to take up the entire space of the tab as I want the whole tab click-able as a link so this solution won't work but the was I have it set up I doubt there is a pure CSS solution? I assume it'll involve javascript?
it may work better to take the background declaration off the <a> tag and just have the <li> background change. You shouldn't need javascript for this unless you want it to work in IE6 too.