Working CSS dropdown

My 100% CSS dropdown works! There's just one minor detail I hope you guys could help me out with. In IE the menu works flawlessly but in Firefox once I move my cursor from the main menu to the dropdown menu, the menu rollover goes back to its original state (doesn't remain in the rollover state), but in IE it remains in its rollover state which is how a dropdown should really work.

Test the sample I made in both Firefox and IE to see for yourself.
I got the original code from Stu Nicholls.

 

Works fine for me in both browsers :\

 

Really? In FF and IE?

 

Here, I did a full test for you +rep please

http://img301.imageshack.us/img301/1821/boinkew1.jpg

works great in all Safari, Opera, IE7, and firefox

 

That's not quite it since the rollover on the menubar went back to being "unrolloved." But it's ok, I found the solution in another forum and it works flawlessly in IE5/6 FF2/3. You can check out my post here.

Special thanks also to crath for those screenshots.

 

Oh, you ment to ask, how to make the main nav bar link keep its "hover" state while over a sub menu?

 

The :focus and :activer pseudo classes - look into them.

 

I've never figured out how to do it in IE6, but for the rest, it's pretty much something like,
#menu :hover > a {
hoverstyles here
}

Meaning, whenever anything inside the whole menu is hovered, the direct child a's (meaning, the first-level menu items) do hoverstyles. IE6 doesn't understand the > so not sure what stu does with them.

Doesn't work with focus because while hovering on the sub counts as hovering over the whole parent, this is not so with focus.

 

Ie6 doesn't know how to do much at all, and I don't worry about it as much anymore because ie7 has been pushed has a highly recommended security update, so most people have upgraded that are running windows update.

 

http://www.google.nl/search?hl=nl&q=css+drop+down+menu&btnG=Google+zoeken&meta=

There are enough free ones...

 

Ahh...deathshadow gave me a working one a long while ago, I'll see if I can find it.

 

How about JavaScript to replace the lines above since IE6 is a retard?

 

Not to replace, but to add-- that is, keep the above code for all the smart browsers (in this case, also includes IE7) because all my menus work in all the smart ones... just "add" Javascript for our retarded friend... those without Javascript, fine, it's only enhancing the site for those with IE6 : )

though if blueparukia comes up with whatever deathshadow did and it works, then that'll also be good.

http://stommepoes.nl/Menus/suckerfish4ie7.html I've got the tops staying hover-states in everyone but 6 (and actually, I have nothing in 6 because I don't actually have the Peterned whatever:hover.htc file on my server... lazy : ) But adding the whatever:hover, the subs would show and just the tops wouldn't stay hovered.

 

I found deathshadow's, which does require the whatever:hover HTC for IE6. I works with keeping the top menu highlighted when a submenu is:

http://forums.digitalpoint.com/showpost.php?p=4883307&postcount=2

 

Mine does too, everyone needs something for IE6, but I see what he does:
#menu li:active,
#menu li:focus,
#menu li:hover {
background:#CDE;
}

instead of setting a hover style on the a's, he does it on the li's, and becuase the sub ul is a child of the li and not the a, hovering over the child counts as hovering over the parent here (my interpretation anyway). Then at the bottom he's got the #DDD colour (or is that just his Carlos Mencia reference?) so that the sub li's are actually different hoverstyle.