Suckerfish drop down question

Quick question.

I recently coded a layout that is using suckerfish (horizontal) drop down menus. Everything looks fine and it works in all major browsers flawlessly (IE6/7, FF, Opera, Safari).

However, I am having one issue - and I'm not sure if it is CSS related or if I just need to do some javascript/dom hackery to fix it.

The problem I am having is when i :hover over the main menu elements (first level LIs) - the links turn from gold to white as they are supposed to. BUT, then when I move the mouse off the link (deactivating the :hover for the element) to go down the menu the link loses its color and goes back to gold - which looks pretty stupid.

Look at my image I attached and you will be able to see what I mean. I'm not sure if this is fixable by CSS, as I'm thinking I might need to whip up some JS code.

// edit: the attachments seem to be bork'd. here is a link http://i37.tinypic.com/jj1fh5.jpg

Either way, if you have any insight it would be appreciated.

cheers

 

It would help if you could post your css code.

But I'm guessing you just have to add something like this

ul li:hover a,
ul li.sfhover a{  /* sfhover will be substituted with whatever class you declared in the JS for IE6 */ 
 color:#FFF !important;}

Code (markup):

 

Uh, I never figured out how to do this in IE6, and I've seen it work so there's some way, but you're trying to refer to a parent based on what happens to the child.

When the child is hovered, the parent should remaing hovered, right? The only way I know how to do this, with selectors:

	#menu ul a:focus, #menu ul a:hover, #menu ul a:active
	[b]#menu ul :hover > a, #menu ul :active > a [/b]{
  	  background-color: #blah;
	  font-weight: bold;
  	  font-size: whatever;
  	  color: #fff;
	}
	[/b]#menu :hover > a, #menu :active > a[/b] {
  	  background-color: #something else;
	}

Code (markup):

First one addresses the children, but the second addresses the parents. It says:

When anything in #Menu (the actual main ul) is hovered or active, then the first a to appear in the menu at all gets the style of background-color: whatever.

The first child of #menu is the main level links.

#menu ul :hover > a, #menu ul :active > a {
  	  background-color: #blah;
}

Code (markup):

Here is says when anything in the SUBmenu is hovered/clicked, then the first children of the whole #menu get a background colour. Again, the first children of #menu are the main level links.
<ul id="menu">
<li><a href="#">stuff</a></li>

is always #menu>a.

 

Thanks man, I added

#nav :hover > a, #nav :active > a {
       color: #fff;
}

Code (markup):

and that fixed it just as you suggested! I'm not worried about aesthetics with IE6 anyways, just as long as the drop down even works

Appreciate it! +green

cheers