Menu hidden behind nice menu and panels in IE7

I need the URL for the affected site.

Seems to be a stylesheet issue, try adding a z-index higher than all other values

.sf-menu {
z-index:9999;
}

If this doesn't work on its own, try adding the following styles

.sf-menu li ul {
z-index:9999;
}

.sf-menu li ul li ul {
z-index:9999;
}

And if that doesn't work out then also try adding

.sf-menu li ul li {
z-index:9999;
}

.sf-menu li ul li ul li {
z-index:9999;
}

Try out the above and let me know if any of them worked for you, and if so, which ones did...

I have the same problem and I'm working on it. I will keep this topic posted if I have any success.

Could you provide me the URL?

I have the same problem when working with Nice Menu. Drop down menu appears hidden behind in IE7, no such problem in FF. Initially, I was not sure if it was due to overflow (hidden) or z-index problem. (BTW, CSS menu said that z-index only work with position attribute!)

My original layout.css was

#header
{
}

#main
{
position: relative;
}

#header, #main
{
overflow: visible;
}

Remove the "position: relative;" in #main solve the problem. Don't know if this will help you.

I had the same problem with IE7, was driving me batty. Removed the "position: relative;" from the #content and it worked perfectly. Thanks geraldme for posting this. You saved me a lot of headaches.

I had the same problem, but couldn't remove the "position: relative;" (on my #header div) because it was there for a reason. Instead I added "z-index:1;" to to my #header div, which solved the problem.

More info on this here:
http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/

I had the same problem. I read many articles and for my case the problem was that my menu was wrapped by a div which had a position relative (I found that later by looking at the other CSS of my theme). I just assigned a higher z-value for the wrapping div, and problem solved.

I just ran into the same problem (well I think it is the same problem) but playing with z-index had no affect in IE6. I have 2 superfish menus, one horizontal and one vertical and the one always went behind the other in IE.

After wasting many hours I found a JQuery solution.

I put this at the top of my theme. I suggest adding some docs to the readme about this and other possible fixes.

<!--[if lte IE 7]>
  <script type="text/javascript">
  $(function() {
    var zIndexNumber = 1000;
    $('div').each(function() {
      $(this).css('zIndex', zIndexNumber);
      zIndexNumber -= 10;
    });
  });
  </script>    
<![endif]-->

Also found the culprit causing the problems. If you remove the bellow position: relative; from superfish.css the menu does not work correctly but IE6 stops overlapping. The menu will not work at all without this position: relative; so I don’t suggest removing it.

.sf-menu li {
  float: left;
  position: relative;
}

Hope that helps.

REF:
Nice explanation of the problem
- http://aplus.rs/css/ie-phone-book/
Describes solution mentioned in #11
- http://jonathanstegall.com/2009/01/15/ie-z-index-bug-with-css-dropdown-m...
Describes the problem with IE and superfish and gives a solution, same as #11
- http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/
JQuery fix
- http://css-tricks.com/snippets/jquery/fixing-ie-z-index/
Same JQuery fix, comments reference superfish
- http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

Please take care of this as well.

Fixed in 1.1 release.

I have the same issue using superfish menu, on a drupal 6 installation. does these solutions work for that module too?? and if so, which one? where do I have to put that code described in #12?
hope someone helps me!! thanks

Had the same problem and the javascript solution in #12 worked perfectly.
In answer to #15's question I put in the head of my page.tpl.php
Cheers and thanks for the help.

Thanks muddie! I've tried adding the code of #12 into my theme page, and first it worked.. then, after 2 weeks, it stopped working..... I know it sounds strange but that's it!! so I've searched again and found another fix (in this issue queue, http://drupal.org/node/717862):

adding

.sf-menu,
.sf-menu * {
z-index: 1000 ; /* ie6 and ie7 z-index bug fix, maintains the menu drop downs above any other positioned elements */
}

to superfish.css, and now it seems to work...
I hope the problem won't appear again.. waiting for an ultimate IE upgrading...

ie, sigh always has problems, anyways after searching for a very long time and researching, i found out the solution

here s hw it works:

.nice-menu, .nice-menu li, .nice-menu li ul, .nice-menu li ul li, #preface, #header-wrapper,#header, #body
{
z-index:9999;
}

z-index should be increased for the root ie body till the nice menu ul li element, hope this helps someone