drop-down-menu

Superfish dropdown menu appears behind slideshow, image etc. in IE7

This is a problem that I found when I was using a superfish drop-down menu with Drupal 7 and Omega, but it is a solution that would work across the board for anybody using a drop-down menu. The primary menu using Drupal is usually in the header-wrapper div (zones-above in Omage) and content is in the main-wrapper div (zones-content in Omage). If you are not using Drupal you probably still have the menu wrapped in the header.  So, in your ie7.css, set the header wrapper to have a z-index of 2, and set no z-index on main-wrapper (which means its 1). Now all content in header-wrapper will appear above main-wrapper, no matter if something has z-index:10000000 somewhere in main-wrapper. NOTE: This is only in IE7, and possibly below, but who cares about IE6 anymore. IE8 has thankfully fixed this problem

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

Nice and simple, hope this helps.  Leave a comment if you’ve found this useful.

Comments
  1. Thanks, I was looking for a quick fix, and my brain was on empty. I had to just change #header-wrapper to #section-header, and it worked.

  2. Travis Johnston

    OMG! You are life saver! I’ve been battling with this for some time now. I tried a similar solution to yours, but I had set the main z-index and never touched the positioning, which didn’t work.

    THNKS!

    • Topher

      No problem,

      Glad it helped.

  3. Gerard

    Thanks, nice to find a solution so easy that works.

  4. How I love burning the midnight oil for ie7 in 2012. Thanks for saving me some time and some hair. Bingo!

  5. Zeal

    Thanks for the tip. I have a question.
    I am using omega and cant find ie7.css file. Am I suppose to install any other module to get this work? Please suggest

    • Typically you would have a css folder in your theme. Create the new ie7.css file and add it to the css folder. then open your omega themes (themename).info file and add the link to the new css file:
      ; ——- Declare default stylesheets
      stylesheets[all][] = css/subtheme.css
      stylesheets[all][] = css/ie7.css

      Hope that helps.

  6. Vinoth

    Nice post, it works for me now.

    Thanks you saved me lot of time.

  7. FANTASTIC!!! So simple and so efficient.
    Thanks!

ADD YOUR COMMENT