Internet Explorer and Z-Index and me

I’m sure you’re already aware of this but IE is a pain in the butt. I just spent more time than I like to admit trying to figure out why my dropdown menu would not stay open (on mouse hover) over my stupid slideshow. At first I thought it was because my stupid slideshow had a z-index value that was too high. So I spent time messing that up. But then I noticed a very curious thing: when I added a background color to the ul, the menu stayed open over the slideshow.

Hmmm.

I had added a background color to the ul but I’d used rgba for a transparent-ish background.Lower versions of IE(less than IE9) ignore rgba and I knew this. What I didn’t know, shockingly enough was that lower versions of IE will create a bug when they have an element with z-index and no background color. So if you want your drop down menus to stay open on hover over another element (no matter if it has z-index or not) you better add a background image or a color or both.

IE is so EVIL!!!!!!!!!!!!!!!!!

2 thoughts on “Internet Explorer and Z-Index and me”

  1. Hi, Thanks for that, I had a similar problem with a drop down menu, spent ages tweaking trying to get to to work in IE as all the rest were great. I never worked out the background color bit, in the end I put in a spry drop down. I will try this next time, thanks again.

    1. Hi Carolynne – I should also mention that I also added more parent divs to the menu. Silly me I was trying to be more streamlined with my HTML and was trying to use the least amount of divs as possible. In the end I wrapped the menu in more divs and gave the immediate parent of the menu a z-index of 10. The top parent had the usual position:relative.
      Trial and Error!

Comments are closed.