CSS Dropdown menu frustrating issue

I've been smashing my head against a wall for about 3 hours now and guessing what's going on isn't wo开发者_JAVA技巧rking either. Can someone please help me rescue my waning sanity?

Basically in IE7 the second level on this menu just won't stay open when you try to hover over it. I've tried z-indexes, containers with position: relative set, line heights, borders, padding...everything!! What am I missing? ARgg!! Must be something obvious at a guess but my tired brain has just given in.

http://www.sah.org.au/devt/

Thanks for your help!

John.

That really is frustrating.

The only (almost there) solution I could find was to add a background-color to #menu a. You can change it to the correct colour on :hover for the different links. Or, just move it from li to a.

Weird, right? It massively helps.

I'm reasonably sure that a perfect solution is going to require (ugly) HTML changes, or writing jQuery to do the same thing (for only IE7).

Based on your comment on the code that says

/* using left instead of display to hide menus because display: none isn't read by screen readers */

I found you don't want sub menus got read by screen reader. I did a research and found out most of the screen readers don't read the visibility:hidden elements. My suggestion to you is removing the left:-999em and replacing it with visibility:hidden and dsiplay:none together.

Here is the article about screen readers: http://www.alistapart.com/articles/fir/