dropdown list not working in ie7, 8 and Firefof 6 (OK in ie 5 and 6)

[Sanj108]

This is my first post so bear with me and do ask if you need any further info.

I am putting a search page together and have taken the css and HTML from our current Intranet Intranet site. It is working fine IE 7, 8 and Firefox 6 for the Intranet site but not for our Google Mini Search where I have added the CSS and HTML to the header file. The drop down menus do not work in the mini. I thought there may be an issue with some JavaScript was not working but this does not appear to be the case as I disabled Javascript for these browsers when looking at the Intranet site. The dropdowns work fine regardless. In addition the dropdowns work fine in IE5 and 6 for the Google Mini.
I go over the character limit when I put all the code in so what I think is happening is in the inline css the following lines seem to determine what happens when you hover over the menu items:


#menu :hover ul :hover ul
{left:120px; top:-1px; background:#222; white-space:nowrap; width:100px; z-index:200; height:auto;}


/* keep the 'next' level invisible by placing it off screen. */
#menu ul,
#menu :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

I've used Firebug in Firefox to have a look at what happens on the Intranet version and see that #menu :hover ul :hover ul is active when hovering over the menus but not when using it for this Google Mini search.

If anyone can take a look at this - I am happy to provide any other code asd required.

Many thanks,

Sanjeev

[Minos]

Well, even though you haven't said how the menu isn't working, I will say that the left:-9999px idea doesn't seem very good. visibility:hidden; and visibility:visible; Would be easier and more logical.

I doubt that would solve the problem, but then I'm not really sure what the problem is.