Drop down menus behind content in IE7


Dropdown menus appear behind content in the div below even if z index is set higher.


CSS based dropdown menus viewed in IE7


This occurs when the div containing the menu is separate from the div containing the content below. IE7 resets the z index for the separate divs. Adding “position: relative;” to both and a zindex to the div containing the menus that is higher thatn that for the content div will solve this.

/*Set zindex of first div to be higher than div below so that
all zindex statements for elements in the first div are respected.
#navWrapper {


  1. Chris Taylor on October 31, 2012 at 4:37 am

    Nice post thanks. Your solution just worked :).


  2. Yogi Liman on January 16, 2013 at 5:28 am

    It does not work on mine. I am not sure what I did wrong. I used z-index instead of zindex. Thank you though.

    • babbler on January 16, 2013 at 8:31 am

      You are right about the z-index. I have updated the post to reflect this.

      Can you give me a link to the site so I can have a look for you.

      • Yogi Liman on August 27, 2013 at 8:39 pm

        Sorry that it took me awhile to respond, but I have found the answer. It was a mistype on my part.

        Thank you for your help Babbler!

Leave a Comment