CSS drop-down/fly-out menus and IE select elements

IE5-6 renders select menus on the top-most layer, no matter how you set up the HTML or how you declare the z-index.

The last time this issue came up for me, I included a javascript that would make the select element disappear when the overlapping drop-downs were triggered. This worked fine because the select menu was the same width as the drop-down and so it was completely covered. Now with a different site, this is an impractical option, mainly because there’s no telling where the select menus will end up or how wide they’ll be.

I’m trying to meld a bunch of CSS drop-down/flyout solutions into one mass. Here are all the features I need:

1. Works in IE5-6, IE7, Safari, Mozilla/Firefox
2. Flyout sub-submenus
3. Drops over select menus in IE5-6
4. Includes hover margin of error (mouse forgiveness when moving from menu to sub-menu)
5. Simplest HTML = easiest maintenance

I’m looking at the combined ADxMenu with the WCH script from aplus.co.yu. Haven’t finished testing yet, so I’ll update this entry when it’s all working.