Thursday, February 15, 2007

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 Haven’t finished testing yet, so I’ll update this entry when it’s all working.

Labels: , , , , ,


Post a Comment

Links to this post:

Create a Link

<< Home