Stop drop down rendering underneath positioned elements in IE7
It seems that Internet Explorers' incorrect implementation of z-index means drop downs will appear underneath positioned (absolute, relative) elements. I'll show you a simple fix!
I came across this Internet Explorerbug (IE6/7) when working on site recently, whereby if two container div's (#nav & #content) have position:relative then any drop down navigation will appear (render) underneath the content div. This is a problem as links can't be clicked and of course it looks awful!
I won't go into the details here (Aleksandar Vacić provides a comprehensive overview and test in this article) but there's a very simple fix to what could be a extremely annoying problem.
Fix
Simply apply a z-index: 1 to the content container (whichever div your menu is hiding underneath) and a slightly higher z-index of 2 (z-index: 2) to your navigation container. I believe that both containing div's must be position relative for this to work, but it fixed the problem for me.
Please let me know if you found this helpful or if you need extra advice.
Dave
1 Comments on this post
Speak to an Expert now on 01225 444 674
Talk to Us
Mr. said “Elements Trying to Hide” a few months ago