Search code examples
jqueryhtmlcssmenusuckerfish

Son of Suckerfish CSS Menu - Top Level Menu staying active on Sub Menu Hover

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.

Solution

  • 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.