Question

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: http://marketplace.prettypollution.com
– 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.

Answer 1

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.