Dropdown Menu Disappearing in IE7

Our site header has two dropdown menus. One of the menus works fine in IE7, 8, and FF. The other one works fine in IE8 and FF, but not in IE7. In IE7, moving the cursor down into the menu results in the menu disappearing. It’s implemented with mouseover and mouseout, so it seems that a mouseout was being sent to it incorrectly.

After brainstorming about the differences between the menu that worked and the one that didn’t, I figured it out. The second menu’s dropdown root element is absolutely positioned, and that element didn’t have a background. Other elements underneath it have backgrounds, but not the root element. And it seems that if the root absolutely positioned element doesn’t have a background, IE7 will treat the whole menu as though it has no background, and send mouseout events to it if you hover over another element that’s beneath it.

Adding a background color to the root element fixed the problem. Unfortunately, we wanted to have translucent PNG rounded corners on the menu, so now the corners have white behind them. Not ideal, but it fixes the IE7 error.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: