IE Fix: Drop Down Menu Loses Focus In Internet Explorer

I just ran in to a problem I’ve never had before. It cost me hours, even caused me to whine on Facebook about how much I hate Internet Exploder, but will never again. I had a css drop down menu that was losing focus and disappearing when I scrolled down over another element.

Internet Explorer Sucks

In every other browser, the menu worked just fine. Only in Internet Explorer had this issue. Big surprise huh?

At first, I thought it was simply a matter of settings the z-index in front of the other elements the menu drops over. That worked for one element, but not another . . I really hate Internet Explorer. Did I mention that?

So I wrestled with this for a while, trying to use a negative z-index on different elements to no avail. Finally, I decided to move on and put the backgrounds in, and whaddya know?

It WORKS! Apparently hidden elements in Exploder need to have a background to retain focus. You still need to set the z-index to put the menu in front of everything else, but the background needs to be there as well.

What If I Don’t Want A Background?

I really can’t think of a reason you would not want to have a background for a menu, but if you don’t, there is a way. Just create a transparent 1 px by 1px .gif, and use it for the background. This will hold the focus on the submenu, but remain transparent.

I hope this saves you some time, and sanity.