Why is jquery Mega Menu showing up behind my images in IE7 and 9?

Question

I have a webpage with a jquery Mega Menu at the top and then there is a jqGrid right below it. When I hover over the menu, the submenu pops up but it shows up "behind" the jqGrid. I tried going into the dcMegaMenu.css and adding:

z-index:2000;

this image is taken directly off of the examples page where this issue is reproducable

all over the place but it still shows up behind the images? Any suggestions?

Answer 1

This problem is caused by an IE7 bug. Quoting myself from the linked answer:

[Here are] some resources which explain the issue:

• IE 6 & IE 7 Z-Index Problem
• IE7 Z-Index Layering Issues
• http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
• http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/

The general idea is to poke position: relative (usually remove it) and z-index on parent elements of the problematic element until it's fixed.

The only way this same problem can be happening in IE9 is if IE9 is displaying the page in Compatibility mode (or is otherwise using IE7 mode). Hit F12 to bring up Developer Tools to see which mode is being used.

To fix this problem in IE7 on the page you linked to, you need to on .demo-container add position: relative; z-index: 1;.

If you're unable to translate this fix to your actual page, I can help further if you provide a link to your actual page (or, an accurate test case: http://jsfiddle.net/ / http://jsbin.com/).

Here's a screenshot from IE9 in IE7 mode with the fix applied using Developer Tools:

Answer 2

Without any code shown, all I can think of is that z-index will do nothing if the element isn't positioned:

#wontwork {
  z-index: 10000;
}

#willdosth {
  position: absolute; /* or relative or fixed */
  z-index: 1;
}

#also { /* link below */
  transform: sth;
  z-index: 1;
}

Reference: https://developer.mozilla.org/en/Understanding_CSS_z-index
For the part about transform and z-index: https://stackoverflow.com/a/7765214/137626

Answer 3

It could be solved using the z-index:1; But with regards to the positioned element. as explained by w3school.com z-index can only be used with positioned elements.So, if you set the mega Menu's list items in a relative position position:relative; and use z-index:1; will work.

Answer 4

by using position:absolute; just add a z-index:1; because element with greater stack order is always in front of the one with low stack other , z-index can be used to control the stack order and it is only used on positioned element