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!

Stop drop down rendering underneath positioned elements in IE7

 

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

Grow your business

Find out how Deep Blue Sky can grow your business.

  1. Digital benchmark
  2. Digital roadmap
  3. Digital engineering

Write a comment.

Responses. (1)

  1. M S

    Mr.

    Elements Trying to Hide

    Yes, I did find this helpful. Thank you.

    I was actually having trouble with secondary and tertiary navigation elements falling behind the main content within FireFox and IE.

    The adjustment did take me a few moments. I merely needed to reference the more specific nav element, instead of its containing element.

    Thank you again!