Design · Culture · Spirituality

IE z-index bug with CSS dropdown menu

Standards-aware web designers generally know of the z-index bug in all versions of Internet Explorer (though, version 8 is rumored to fix it).

In the W3C’s specs, z-index is designed to affect the stacking order of positioned elements on a web page. So, an element with a z-index of 2 should always appear above an element with a z-index of 1.

In Internet Explorer, this doesn’t work like it should. Internet Explorer resets the stack when the positioned elements are separated from each other.

Example

So let’s say we have the following HTML. Fairly standard header, navigation, etc.

  1. <div id="wrapper">
  2. <div id="header">
  3. <ul id="nav">
  4. <li><a href="#">home</a></li>
  5. <li><a href="#">item one</a>
  6. <ul>
  7. <li><a href="#">sub item one</a></li>
  8. <li><a href="#">sub item two</a></li>
  9. </ul>
  10. </li>
  11. <li><a href="#">item two</a>
  12. <ul>
  13. <li><a href="#">sub item one</a></li>
  14. <li><a href="#">sub item two</a></li>
  15. </ul>
  16. </li>
  17. </ul>
  18. </div>
  19. <div id="container">
  20. <h1>Hi. This is a positioned H1</h1>
  21. <p>This page is just some friendly content to show you just how bad IE really is.</p>
  22. </div>
  23. </div>

Then, we have the following CSS.

  1. #wrapper #header {
  2. position: relative;
  3. }
  4. #wrapper #nav {
  5. clear: both;
  6. margin: 0 5px;
  7. padding: 0 5px;
  8. width: 750px;
  9. height: 30px;
  10. list-style: none;
  11. border-top: 1px solid #335a86;
  12. border-bottom: 1px solid #335a86;
  13. text-align: center;
  14. position: relative;
  15. z-index: 2;
  16. }
  17. #wrapper #nav li {
  18. float: left;
  19. margin: 0;
  20. padding: 0 0 5px 0;
  21. border: 0;
  22. position: relative;
  23. }
  24. #wrapper #nav li a {
  25. margin: 0;
  26. padding: 7px 15px;
  27. display: block;
  28. text-decoration: none;
  29. font-size: 1.2em;
  30. }
  31. #wrapper #nav a:link, #wrapper #nav a:visited {
  32. color: #888;
  33. }
  34. #wrapper #nav a:hover, #wrapper #nav a:focus {
  35. color: #335a86;
  36. }
  37. #wrapper #nav li ul {
  38. background-color: #ccc;
  39. width: 150px;
  40. height: auto;
  41. list-style: none;
  42. margin: 0;
  43. padding: 5px 0 10px 0;
  44. border: 0;
  45. text-align: left;
  46. position: absolute;
  47. display: none;
  48. }
  49. #wrapper #nav li ul li {
  50. float: none;
  51. margin: 0;
  52. line-height: 30px;
  53. height: 30px;
  54. }
  55. #wrapper #nav li ul a {
  56. padding: 7px 10px;
  57. white-space: nowrap;
  58. display: block;
  59. }
  60. #wrapper #nav li:hover ul {
  61. display: block;
  62. }
  63. #wrapper #container {
  64. padding: 10px;
  65. position: relative;
  66. }
  67. #wrapper h1 {
  68. position: absolute;
  69. left: 10px;
  70. top: 10px;
  71. height: 60px;
  72. line-height: 60px;
  73. vertical-align: middle;
  74. font-size: 2em;
  75. background: #335a86;
  76. color: #fff;
  77. }
  78. #wrapper #container p {
  79. margin-top: 60px;
  80. }

This is very common code used to trigger a CSS dropdown menu in all modern browsers. Remember that IE6, of course, requires a small JavaScript. A good example is the Sons of Suckerfish. I do not have this JavaScript on my current example, since there are plenty of other great articles about that.

IE Dropdown Bug Example

IE7 Example – click to enlarge

When the code below the navigation, in this case the absolutely positioned h1, is any positioned element (or a select element, Flash movie, etc.), all versions of Internet Explorer prior to version 8 will cause the dropdown menus to fall behind the content.

The Fix

The fix for this is very simple, but there are incredibly large websites that use jumbled masses of iframes, extra divs, and other horrors to get Internet Explorer to display the dropdowns above the offending elements.

For a fix, we use the following CSS for the header div. See the screenshot for an example of this (again, in IE7). Click it to see a larger version.

  1. #wrapper #header {
  2. position: relative;
  3. z-index: 2;
  4. }

Now, you will also need to make sure that your container div, whatever it is called, is styled correctly. In my example:

  1. #wrapper #container {
  2. position: relative;
  3. }

This ensures that the header and the container, whatever you call them, understand their relationship to each other for the z-index fix to work.

IE Dropdown Bug Fix Example

IE7 Example – click to enlarge

This fix causes the dropdowns to appear above everything that is inside the content areas of the page. It works in IE7 and IE6. My example adds some code to show the <select> statement, which is another common offender.

148 Comments

  1. Thank you! Elegant & perfect & simple solution! You saved me a great deal of grief, too!

  2. damn.. its not work on ie 6 ..
    frame solution always better !

  3. @kuse: Do you have an example of the solution not working in IE6? I’m always interested to see if these kind of challenges can be resolved in a standards-friendly way.

  4. Thank you thank you thank you.

    Works for me in ie 7.

  5. @Larry: Glad it worked for you. Feel free to come back, if you run into any issues or have any questions with it.

  6. Larry you are a livesaver! This fix I have been looking for, for some time. Thank you so much.

  7. @Matt: I’m Jonathan, but you’re welcome :). Glad it helped.

  8. This is the CORRECT solution. Lots of forums on the net have you adding z-index to all different parts of the drop down. You only need to add it to the header. This works on Suckerfish and Son of Suckerfish as well.

  9. Thank you so much. You helped me a lot.

  10. Sorry it doesn’t work in my IE 6 (6.0.2800.1106 with SP1). The items don’t even drop down.

    IE 7+ works great, but I need for IE6, any suggestions? Thanks.

  11. @Bill: Right. To get dropdowns to work in IE6, you do need a small JavaScript. This is because IE6 does not support pseudo classes on lists, like new browsers do.

    To fix this, there are a variety of scripts available. One of the easiest to use is the Suckerfish dropdown technique from several years ago. There are others, but this one is a great start.

    The dropdowns themselves are not what I was looking to show with this particular post, though of course it is a related issue. Thanks for asking.

  12. Thanks so much for this. Im working on a new project and knew that z-index was the problem. I tried adjusting various elements of the navbar CSS, based on many blog posts, without success. It did not occur to me to raise the z-index on the entire header wrapper (which the navbar is inside). I had given up, and instead had simply put a message in the fine print, suggesting that IE users upgrade to IE8 in order to properly view the site. Now the whole header sits in front of the content, including the navbar dropdowns. It finally works in IE7, which is what I was testing with! Handy to know it wont work in IE6 too! (Not that I care about that).

    Im leaving that message in the fine print though! 🙂

  13. Thank you!
    I couldn’t figure out the reason for the life of me why the drop down menu was displaying behind only SOME of the content. This was a very concise and helpful explanation.

    Thank you again!

  14. Thank you for such a simple and elegant solution. I finally found your website way past midnight and was ready to tear my hair out. It worked beautifully.

    -V

  15. So simple, and works so beautifully.

  16. I tried pasting the code in my css sheet, but the drop sown menu is still behind the text and images in IE8. Any suggestions as to what I am doing wrong?

  17. you save my day buddy, fantastic just simply awesome. end of the IE sucks a lot 🙂 LOL

  18. @Ronek: This is IE8 where the issue is happening? Does it also happen in IE6/IE7? What about Firefox? Also, does your HTML and CSS validate?

    Look into these things first, and see if you notice anything that tips you in the right direction. If you don’t, feel free to post a link where we can see the offending page.

  19. […] dropdown menu Filed under: Code, Firefox, Internet Explorer — papercliphand @ 4:09 pm IE z-index bug with CSS dropdown menu | jonathan stegall: creative tension Leave a […]

    • Jonathan Strange
    • August 5th, 2009 at 11:00 am
    • Link to this

    Fuggin’ sweet, thanks so much. Couldn’t figure this one out.

  21. Thanks for this. Worked perfectly! Had been trying to get it to work by applying the z-index to the ul ul before I found this.

  22. YOU ROCK! Thank you!!!

  23. You save my life! Love you!!!

  24. Thank you sooo much! Great solution.

  25. Thanks for the fix Jonathan. It is the best explanation of it that I have seen, but it is not working on my site in ie7.

  26. @Joshua: Can you send a link? I’d be happy to look at it. Also, have you checked to make sure the HTML and CSS validate? Does it work in IE6?

  27. Thanks! Worked like a charm!

  28. Thank you!
    🙁 But it’s not working in IE 6.
    Please give some solution.

  29. @shirley: Well, the solution depends on what you are seeing in IE6. To get dropdowns to work in IE6, which is the only difference in this case with IE7, you do need a small JavaScript. This is because IE6 does not support pseudo classes on lists, like new browsers do.

    To fix this, there are a variety of scripts available. One of the easiest to use is the Suckerfish dropdown technique from several years ago. There are others, but this one is a great start.

    The dropdowns themselves are not what I was looking to show with this particular post, though I’m happy to link to those kind of solutions.

  30. Thanks. This may have saved me. Still testing, but it seemed to work.

  31. Hi Jonathan,

    Great article!

    On my site it works great in IE8 but in IE7 my drop down menu appears behind a table that loads a javascript rss reader…it is bugging me a bit..

    If you ping via mail I can give you the details. I have tried the z-index but something is still off.

    Best regards,
    Phillip

  32. Shot – works well, IE is so #$@!$#@%@$%

  33. Wow, your fix did indeed fix my very thorny IE7 / z-index / drop down menu issue on this URL – http://weygandtwines.com/wine-french.htm. The theory makes perfect sense (in a warped IE7 sort of way), and to me better code is better fix than javascript.

    A thousand thank yous for saving my skin.

  34. Excellent, this was driving me nuts, had the same problem with a dropdown falling behind a slider.

    Thanks

  35. Awesome, saved me a ton of time today, now I can get on with my work. Thanks!!!

  36. hmmmmm.

    This fix appears to work in showing the menu above content, but unfortunately mouse events on the contents of the menu (ul>li>ul>li>a) don’t appear to bubbling. It’s as if the display is showing the header at the correct level, but the event model in the browser is still not able to figure this out…

    got an annoying issue here that will not seem to resolve itself.

    strange…

  37. Thanks, exactly what I needed

  38. Thanks, I am looking it during last 6 month. It’s really help to me. Today, i solved my problem.

    Thanks again….. God bless you

  39. doesn’t work in IE 6 for me either. in fact, when i hover over the menu nothing happens.

  40. @j.m.: If nothing happens in IE6, you do need a small JavaScript as I mentioned earlier. This is because IE6 does not support pseudo classes on lists, like new browsers do.

    To fix this, there are a variety of scripts available. One of the easiest to use is the Suckerfish dropdown technique from several years ago. There are others, but this one is a great start.

  41. A nice, clear description of the issue yields a timely 3AM bug fix for me. Thanks!

  42. Thanks – helped me greatly!

  43. Thank you!. It works perfectly as you described for IE6 and IE7.

  44. thanks very much, this was exactly what i needed to cater for the users languishing in an ie7 hell…

  45. Awesome. I had been struggling with fixing the z-index bug even with help from some other respectable websites, but the clarity with which you have explained and the simple example have helped me understand almost instantly the solution. how do i thank you?
    Cheers.
    you are a good man.

  46. I copied and pasted your code, and I have the csshover.htc file to take care of IE’s :hover failings. However, your solution did not work *completely*. The H1 tag appears behind the dropdown like it should. However, when I replaced your H1 tag with a SELECT tag, the SELECT tag forces its way in front of the dropdown. Are you adding anything special to your SELECT tag in the example?

  47. @Bob: Well, I’m not sure. First of all, though, see if it works in IE7 without the csshover.htc file. Of course it won’t work in IE6, but IE7 does not have the hover issue so you can test there and see if that is the problem. I’ve sometimes had weird issues with htc files, so it is possible.

    If that does fix it, you can use a conditional comment to serve a JavaScript to IE6 instead of the htc file. I’ve successfully used the Suckerfish technique, for example.

    If the htc file proves not to be the issue, though, feel free to post a link.

  48. Thanks a lot 🙂 This is the easiest and most easy to understand example-solution I’ve found about this issue.

  49. Lovely fix, thanks very much.

  50. Johnathan,

    Thanks so much for this post! I have a corporate site launch on Thursday and this bug was causing me great frustration.

  51. Hi Jonathan,

    I want to join the army of supporters in saying that this is an excellent simple fix! Thanks so much, I was tearing my hair out and was beginning to suffer severe professional anxiety. Cheers!

  52. Thank you so much for this post!!! Fantastic Work…

  53. I can’t even believe this was that easy to fix! I already had the positions:relative; on my divs, all I did was add the z-index:2; to my header div and lo and behold, it works staright away!

    Genius.

  54. Thanks a lot.

    This method is very useful!

  55. I just spent the last 1½ days on this problem… can’t even believe that changing this little thing (z-index on the #header instead the #nav) solve the problem!
    Thxalot!
    (lol, I don’t take any chance, i bookmark this page!)

  56. Thanks for this article i found it very useful, just added position:relative; to my header and it fixed the problem i’ve been worrying about for days! 🙂

  57. Worked like a charm !!

  58. Dude you deserve a hi5 for the post.

  59. Thanks, useful content…

  60. Thanks!!

  61. THANK YOU!!! This was the fix I needed.

  62. THANK YOU! for that really simple and working solution.

  63. OMG thanks so much for this simple and effective solution. This was driving me nuts!

  64. OMFG it worked 😀

    It didn’t think it would because of my positioning of the layers but it really worked!!

    Thanks so much!

  65. Fabulous short and simple explanation. Love the fact you can quickly Google a problem you’ve having and get answers quick. Problem fixed in under 5 minutes after discovering.

  66. Great example showing how to defeat IE7 z-index issue. I had read some other posts similar, but your explanation hit the spot and I adjusted position & z-index of nav-bar element and position of content element below and it renders correctly in IE7.

    Thanks much!!! I hope browser tech is getting to the point where these issues ‘bad actors’ in the browser realm go away and developers/design can concentrate on moving forward instead of always patching/fixing things to work for IE. Cheers – SB 😉

  67. I still have this problem in IE 6, but I can’t seem to get it to work (even with your fantastic example). Think you could look at my code and tell me what’s wrong?

  68. Thanks for the idea – worked for me!

  69. it is not working in IE6.
    Any solution?

  70. @Jonathan, You are an absolute star mate, so simple yet effective.

    This has been driving me rather crazy for the last few days, sorted. If we ever meet, I owe you a beer.

    🙂

  71. Very elegant solution… thank you! I just wish we didn’t still have to fix IE6 bugs!!

  72. THANK YOU!

    I was on the verge of suicide playing around with many z-index settings!

    After reading through your article it occurred to me that I had not set one for a parent element containing my navigational drop down elements!

    Thank you again! – I still have a headache though!

  73. Hello:

    I see the solution is well explained but someone designed my css menu and I don’t know where I can put my Z index. Here is the Css:

    /* LAYOUT */

    body {
    background: #242323 url(images/background.png) top left repeat-x;
    }

    #wrapper {
    padding:0;
    }

    #container {
    padding-bottom: 10px;
    }

    #contentwrap {
    background: #fff;
    }

    a {
    color: #8e1c4b;
    }

    a:hover {
    color: #a13b65;
    }
    /* HEADER */

    #header {
    height: 115px;
    padding-top:35px;
    }

    #header h1 {
    margin-bottom: 0px !important;
    padding: 8px 0 0 0px;
    font-weight: normal;
    font-family: Georgia, Times New Roman Times, Serif;
    font-weight: bold;
    font-size: 48px;
    }

    #header h1 a, #header h1 a:visited {
    color: #424544;
    text-decoration: none;
    }

    #header h2 {
    color: #646464;
    font-size: 14px;
    line-height: 14px;
    font-family: Arial;
    font-style: italic;
    }

    /* NAVIGATION MENUS */

    #pagemenucontainer {
    height: 42px;
    margin-top: 19px;
    }

    #pagemenu {
    height: 30px;
    }

    #pagemenu, #pagemenu ul {
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 1;
    }

    #pagemenu {
    margin-bottom: 1px;
    }

    #pagemenu ul {
    float: left;
    list-style: none;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    }

    #pagemenu li {
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0px;
    }

    #pagemenu ul li {
    list-style: none;
    margin: 0px;
    padding: 0px;
    }

    #pagemenu li a, #pagemenu li a:link {
    color: #FFF;
    display: block;
    margin: 0px 3px 0px 3px;
    padding: 8px 10px;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11px;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 5px;text-shadow: 0 1px 0 #424544;
    }

    #pagemenu li a:hover, #pagemenu li a:active {
    background: #8b8c8d;
    color: #fff;
    display: block;
    text-decoration: none;
    -moz-border-radius: 8px;
    -khtml-border-radius: 8px;
    -webkit-border-radius: 8px;
    }

    #pagemenu li.current_page_item a {
    background: #8b8c8d;
    color: #fff;
    -moz-border-radius: 8px;
    -khtml-border-radius: 8px;
    -webkit-border-radius: 8px;
    }

    #pagemenu li:hover, #pagemenu li.sfhover {
    position: static;
    }

    .navcontainer {
    height: 40px;
    padding-top: 0px;
    }

    #nav {
    height: 32px;
    }

    #nav, #nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 1;
    }
    #nav {
    margin-bottom: 1px;
    }

    #nav ul {
    float: left;
    list-style: none;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    }

    #nav li {
    float: left;
    list-style: none;
    margin: 0px;
    padding: 0px;
    }

    #nav ul li {
    list-style: none;
    margin: 0px;
    padding: 0px;
    }

    #nav li a, #nav li a:link {
    color: #fff;
    display: block;
    margin: 0px 6px 0px 0;
    padding: 10px 14px;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    font-family: Arial, Helvetica, Sans-serif;
    text-transform: uppercase;
    }

    #nav li a:hover, #nav li a:active{
    background: #393a3a;
    color: #fff;
    display: block;
    text-decoration: none;
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    }

    #nav li.current-cat a {
    color:#fff;
    background: #393a3a;
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    }

    #nav li:hover, #nav li.sfhover {
    position: static;
    }

  74. @Jane: Well, without seeing the full HTML and maybe the rest of the CSS we can’t be sure what you need, but I would try to put the z-index on the pagemenucontainer declaration. You’ll need to put position: relative on that element, as well.

    Now, there is probably a div or something below the menu, and you’ll need to make sure that it, also, specifies position: relative.

    I think that’ll be enough for you to work with to get it into your code.

  75. Issues fixed………

  76. You should check your code under IE6 (http://design.jonathanstegall.com/css/iedropdownbug.html):
    the dropdown will not come down. If you make it come down (display: block;), the ‘select’ will be displayed above the dropdown.

  77. Nice and compact solution. Can’t believe that I need to set both of them as relative (thought that it’s the default and it should know by itself) Works perfect on IE7 for me. IE8 doesn’t have this problem.
    Thanks again.

  78. Thanks a lot! your code just saved me.

  79. THANK YOU!!!

  80. Thank you!!!! just saved me a lot of work hours

  81. Worked like a charm 🙂 Eternally grateful!

  82. […] http://jonathanstegall.com/2009/01/15/ie-z-index-bug-with-css-dropdown-menu/ […]

  83. perfect, you saved me to

  84. Thanks, this has solved my problem 🙂

  85. Sorry, but for my doesn’t work. I’ve put “position: relative;” to 2 divs (let them be content and subnav). What this solution does is just to push my content div down and show only the subnav. What’s the problem?

  86. THANKS a bunch! It worked for me even in IE6 (using Java). THANKS THANKS THANKS THANKS THANKS THANKS!!!
    You rock!

  87. Sweet! I have been searching for a simple/elegant solution for this for weeks! Thank you for your advice, it worked exceptionally well!

  88. Thanks! Fix worked in custom Ning css, even in IE6.

  89. Excellent, you’ve saved my life!

  90. What if the select content is from the external plugin, where I wont be able to add a z-index property!

  91. Thank you!! Saved me pulling out any more hair.

  92. Hi, thanks for your post, it gives me some courage back.
    But it still doesn’t work for me.
    Inside your “container” div I have some absolute divs, and they still appear over my dropdown div.
    Any ideas?
    Thanks again!
    Davide

  93. Add me to the list of people praising you – that it’s such a simple solution makes it all the better.

  94. You have absolutely NO IDEA !!!!!! how you have saved our BACON, this fix is brilliant and was driving me nuts !! Thanks mate

  95. What a life saver, my head has been battered for 2 days trying to figure this one out.

    Many, many thanks!

  96. Thanks for this article. You really help me out.

  97. What Chad and Darren said.
    Seriously, thank you.

  98. I still had the same problem with a mega menu appearing behind the table even after I tried this solution and resolved it by setting the table z-index: -1 works in IE7 and Firefox a treat.

  99. Thank you! You saved me lots of time and frustration!!!!

  100. THANK YOU! After searching for a couple hours over the Internet, I finally found the magic keywords in Google to pull up your page. This solved my issue. I thought I was going to waste the whole day on this. Thanks again!

  101. Brilliant post, exactly what I needed! Thanks!

  102. Thanks for this!!! I wasted many hours with convoluted solutions involving javascript functions to reorder the entire page. So glad I finally stumbled across this page. Perfect solution for IE 6 & 7! Kudos!

  103. Thank you, thank you, thank you… after pulling my hair out for hours trying to figure our why changing only the z-index was only fixing it for firefox, chrome and every other browser, the missing piece of the jigsaw has been found.. position:relative, so obvious now.
    Cheers

    Ian

  104. Single most useful blog post I’ve read in a long time!

  105. Thank you so much. It’s take me out this problem. “Simple is best Solution”

  106. I used your solution for my menu and now it works in IE7 and IE6. Thanks a lot!

    I found your solution through this website: http://www.cjboco.com/blog.cfm/post/css-pulldown-menu-displays-behind-an-element-or-picture-in-ie7/

  107. […] http://jonathanstegall.com/2009/01/15/ie-z-index-bug-with-css-dropdown-menu/ Like this:LikeBe the first to like this post. Categories: css Tags: css fixing, IE z-index Comments (0) Trackbacks (0) Leave a comment Trackback […]

  108. […] this fixed it: IE z-index bug with CSS dropdown menu | jonathan stegall: creative tension __________________ I do internet marketing and various other bits and bobs – […]

  109. that works fine to me on IE7 and above. Thanks for your detailed article..!

  110. Thanks for this. Showed me something I didn’t think about and fixed the little problem I had.

  111. Simple and elegant solution..thank you.

  112. Still an issue even today. Your answer was perfect and simple! Thank you.

  113. it’s working 2 years later LOL… still need this site i’m working on to be compatible with ie7 just to make sure everyone can see my menu the right way..

    thanks!

  114. thankyou!!

  115. Thanks !

  116. Thank you sooo much! I have been working on Web development for 10 years and constantly have issues of such nature, like dealing with IE but now with HTML5 and everyone wanting to get into it, it’s getting more frustrating, your solution worked magic, all I had to do was to remove z-index: 9999 from the absolute positioned dropdown and voila! IE is fine now.

  117. Thanks a heap. Exactly what I was searching for.

  118. Hi, Thank you for helping out of this but I still have a few problems. On IE the menu on second level still appears under site content and on Mozilla it doesn’t work at all! I have placed the html code in a side box on my website.

  119. Hi Jonathan. I am not a strong user of CSS or HTML, so I really need your help.

    My drop-down menu does not work on IE, no matter the edition. It only works on Mozilla.

    I tried to understand whta you are writing above but… 🙁

    Is there a chance that you take a look at http://www.seaspinning.net and give me a solution?

    thank you for your time

  120. thank you very much !

    last few month i have face this problem money time but i am not get proper solution every time just do the position reletive div make z-index:-1; but that is not work when webpage have body color or body bg
    finely i find the solution just because of you

    so simple & with example grate work (-_-)

  121. Hi, Thank you, I’ve used your trick before but I’m totally stuck on the current site I’m working on. Any ideas where I might be going wrong?

    http://studiomouvement.com/

    http://studiomouvement.com/wp-content/themes/mouvement/style.css

  122. You rock! Thanks dude.

  123. Great solution. Thanks for posting this information. z-index in IE7 was so painful – fortunately I’ve never had this problem in IE8+ nor any other modern browser.

  124. This fix has worked well with our application.
    Thanks a lot.

  125. Perfect Thank you!

  126. GUY you deserve an award i FINALLY SOLVIT Thank you very much..

  127. […] http://jonathanstegall.com/2009/01/15/ie-z-index-bug-with-css-dropdown-menu/ This entry was posted in Uncategorized. Bookmark the permalink. […]

  128. Hi Jonathan, nice tutorial you’ve made here and it seems to still hold relevance 3 years later. My question deals with a different aspect of this dropdown menu: the ul padding-top you’ve applied to the sub-menu (dropdown).

    I’m building a site where that top divide is necessary between the dropdown and parent menu item, but in IE (as in you’re broken demo example) the dropdown glitches and hides when the cursor navigates that empty (padded) space.

    I see that you’re fixed example has not only fixed the appearance order but also fixed that padding-top glitch, and I’m wondering if you could comment as to what property has fixed that IE problem with the padding. Of course, my menu works fine in all other browsers, but IE seems to not treat the padding as hover-able space.

    Any comment would be appreciated!

  129. Thank you so much!

  130. Just perfect ! Thank you, it saves me a lot of time and a few million of brain cells

  131. Thanks it worked for me.

  132. Beautiful

  133. Post from 2009 and still having this problem… and fixed with your clean solution 😀

    You are awesome! Thanks! 😉

  134. […] Die Lösung lag dann auch sehr nahe. Im Internet Explorer ist ein z-index Bug enthalten, welcher die Funktionalität der z-index Angabe mehr oder weniger ignoriert. Die Lösung war dann relativ einfach, man musste aber erst darauf kommen: […]

  135. Hi There, I tried this, even redesigned the whole page to use postion:relative rather than absolute. I must be missing something as my drop downs still fall behind my flash in IE7 and safari on a PC – works fine on Firefox and safari on a MAC.

    I have pasted my CSS Here for you:

    @charset “UTF-8”;
    /* CSS Document */

    body {
    font-size:13px;
    font-family:Arial, Helvetica, sans-serif;
    }

    td {
    font-family: Arial, Helvetica, sans-serif;
    }

    th {
    font-family: Arial, Helvetica, sans-serif;
    }

    div#main {
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    position: relative;
    z-index: 3;
    height: 1124px;
    background-image: url(images/verticalbkgrnd.gif);
    background-repeat: repeat-x;
    }
    #main #white {
    position: relative;
    height: 133px;
    width: 1024px;
    }
    #main #orange {
    position: relative;
    height: 30px;
    width: 1024px;
    left: 1px;
    z-index: 2;
    }
    #main #top-beige {
    position: relative;
    height: 145px;
    width: 1024px;
    }
    #main #mid-flash {
    position: relative;
    height: 383px;
    width: 1024px;
    }
    #main #darkgrey {
    position: absolute;
    height: 157px;
    width: 1024px;
    background-color: #363636;
    }
    #main #low-beige {
    position: relative;
    height: 275px;
    width: 1024px;
    }

    p a {
    color: #ffffff;
    text-decoration:underline!important;

    }
    a{
    color:#ffffff;
    text-decoration:none;
    }
    p a:hover{ text-decoration: none!important;
    }

    ul#nav {
    list-style: none;
    padding: 0;
    margin: 0;
    }

    ul#nav li a {
    display: block;
    font-weight: bold;
    padding: 2px 5px;
    background:#e86d1f;
    text-decoration: none;
    }

    ul#nav li a:hover{
    background:#e86d1f;
    color:#414141;
    text-decoration: none;
    }

    ul#nav li {
    float: left;
    position: relative;
    text-align: left;
    margin-right:1px;
    border:none;
    padding-right: 70px;
    }

    ul#nav li.current a{
    background:#e86d1f;
    }

    ul#nav li.current a:hover{
    background:#e86d1f;
    }

    li ul {
    display: none;
    position: absolute;
    width:140px;
    top: 0;
    left: 0;
    font-weight: normal;
    padding: 5px 0 5px 0;
    margin-left:-1px;
    }

    ul#nav li ul.sub li{
    border-width:0 0px 0px 0px!important;
    list-style: none;
    text-align: left;
    width: 130px;
    margin: 0 0 1px 0;
    }

    ul#nav li ul.sub li a{
    display: block;
    color: #FFF;
    background-color: #e86d1f;
    width: 9em;
    border-bottom-right-radius: 5px 5px;
    border-bottom-left-radius: 5px 5px;
    padding: .2em .8em;
    height:30px;
    line-height:30px;
    text-decoration: none;
    }

    ul#nav li ul.sub li a:hover{
    background-color: #646464;
    color: #FFF;
    }
    li>ul {
    top: auto;
    left: auto;
    }

    li:hover ul, li.over ul {
    display: block;
    }

  136. Excellent, this was driving me nuts, had the same problem with a dropdown falling behind a slider.

    Thanks

  137. […] http://jonathanstegall.com/2009/01/15/ie-z-index-bug-with-css-dropdown-menu/ //$(document).ready(function(){ var rightMargin = 0; var leftMargin = 20; if ('' != ''){ […]

  138. Just perfect ! Thank you, it saves me a lot of time and a few million of brain cells

  139. Thanks, you saved me!!!!

  140. thanx.. it works.

  141. IE7 dropdown issue was bothering me too much. Thanx a ton for this tutorial. I was able to resolve the problem 🙂

  142. […] Googling the issue I came across this post which explains the problem perfectly. I needed to apply z-indexes to higher level elements that sit […]

  143. Awesome. after 2 hours playing and searching i came across this. Worked like a charm

  144. Hi,

    I want to hide the options of the drop down also.

    How it is possible?

  145. […] this example for the Internet Explorer z-index bug, where select input show through absolutely-positioned elements placed above them. So, if I have a […]

  146. Oh my, the easiest and most elegant fix ever! Thanks!

    But I’m ashamed, that it’s 2013 and I still sometimes have to support IE7 :(((

  147. Ha Ha briedis, you’re right! It is now May of 2013, and I am JUST now getting a couple of sample pages up, using the much-maligned Spry menu. As soon as I can take the time, I’ll learn my jQuery and CSS3 and jettison such things. Meantime, the people that are going to help out with this project may well be using IE6 and IE7. Your simple fixes worked for both! Thanks.

    Now, onto the IE 6 PNG bug fix!

  148. I found that in the following CSS

    
#wrapper #header {
position: relative;
z-index: 2;
}

    I didn’t need to alter the position. It was just the z-index that solved the issue.

    This resolved issues with IE 7 and below properly displaying drop downs and HTML elements over a Flash movie as well.

    Z-index is a oft misunderstood “art”.

About the Designer

Jonathan Stegall is a web designer and emergent / emerging follower of Jesus currently living in Atlanta, seeking to abide in the creative tension between theology, spirituality, design, and justice.

Elsewhere