CSS dropdown that works

[enchance]

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 (http://johnimbong.com/locker/dropdown/index.html) I made in both Firefox and IE to see for yourself.
I got the original code from Stu Nicholls (http://www.cssplay.co.uk/menus/final_drop.html).

[Centauri]

This is because in IE, due to the illegal nested tables inside the <a> element, the dropdowns are a child of the <a>, whereas in FF the dropdowns are a child of the <li>. The rollover effect on the top <a>s should be referenced to the :hover on the <li> and not the <a>. Just another reason why the suckerfish dropdown works better.

[enchance]

This is because in IE, due to the illegal nested tables inside the <a> element, the dropdowns are a child of the <a>, whereas in FF the dropdowns are a child of the <li>. The rollover effect on the top <a>s should be referenced to the :hover on the <li> and not the <a>. Just another reason why the suckerfish dropdown works better.

So there's nothing I can do?

[Centauri]

Well, yes you can. First, as the background images are only shifted on rollover, there is no need to specify the image again on each hover rule, and the hover rules may all be then combined into one to handle the lot. Then including the same rule on the <li> hover is simple. So the hover rules would reduce to (addition in red) :/* handles the rollover process*/
#links a:hover, #links li:hover a {background-position: 0 -33px;}
#linkHome a, #linkHome a:visited {background:url(home.gif) no-repeat;}
#linkProducts a, #linkProducts a:visited {background:url(products.gif) no-repeat;}
#linkCompany a, #linkCompany a:visited {background:url(company.gif) no-repeat;}
#linkArticles a, #linkArticles a:visited {background:url(articles.gif) no-repeat;}
#linkNews a, #linkNews a:visited {background:url(news.gif) no-repeat;}
#linkContact a, #linkContact a:visited {background:url(contact.gif) no-repeat;}

[enchance]

Well, yes you can. First, as the background images are only shifted on rollover, there is no need to specify the image again on each hover rule, and the hover rules may all be then combined into one to handle the lot. Then including the same rule on the <li> hover is simple. So the hover rules would reduce to (addition in red) :/* handles the rollover process*/
#links a:hover, #links li:hover a {background-position: 0 -33px;}
#linkHome a, #linkHome a:visited {background:url(home.gif) no-repeat;}
#linkProducts a, #linkProducts a:visited {background:url(products.gif) no-repeat;}
#linkCompany a, #linkCompany a:visited {background:url(company.gif) no-repeat;}
#linkArticles a, #linkArticles a:visited {background:url(articles.gif) no-repeat;}
#linkNews a, #linkNews a:visited {background:url(news.gif) no-repeat;}
#linkContact a, #linkContact a:visited {background:url(contact.gif) no-repeat;}

Hey it worked! Although there were some bugs in IE which got me scratching my head, all I had to do was place the first line to the very end and there you have it! Nothing like CSS goodness to perk you up during the day. Thanks a lot centauri!