Here’s a bit of an oddity with IE I’ve found.
If you take a look at the CSS drop-down menu demo you’ll see I’ve added a second top-level item. This item’s submenus have no background color. (Actually, the color is set to transparent to counter a higher-level CSS background-color definition.)
Now try using those menus with IE. The first top-level item and its menus will work fine. Now try the second top-level menu item. Try hovering over the third/bottom “level three” link. You probably won’t get your mouse over it before the menu disappears. Those with really fast hands might be able to pull it off.
So it would seem that the simple act of adding a background color can drastically change how an element is handled by IE. This isn’t a hasLayout* hack issue, this is something different.
My guess is that IE allows mouse events to be passed to any object(s) below a transparent object. So when you mouse over any area of those list items that isn’t a border or text will trigger IE to pass the mouse’s position and any rollover events to any objects below the menu. By having these events pass to another object, I believe a mouse-out event is triggered on the menu, thus losing the :hover state and making the menus collapse.
This is a bit frustrating, but once you’re aware of the bug, you can easily work around it.
Other Drop-Down Menu Issues
You’ll note in the various layouts that I use a horizontal menu based on unordered lists, I make the list elements inline elements rather than
list-item. I take this approach, rather than using floats, so that the list functions as expected (or as best as can be) in IE 4 and IE 5.0, where floating the list-items don’t work as well.
The downside to this is that drop-down menus off those elements don’t work so well. Opera simply doesn’t display them as if the :hover state is ignored. IE seems to set the drop-downs as having a
z-index of -9 million, as they appear under the text of the main content/column, rendering them unusable.
So I’ll have to play around with that a bit and see what alternatives there are. I’ve wanted to take the time to re-invent my list-based menus anyways, and this looks to be as good a time as any.