Dropdown Menu Disappearing in IE7

September 17, 2010

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.