3

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

enter image description here

enter image description here

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

leora
  • 188,729
  • 360
  • 878
  • 1,366
  • Could you add some code to your question, and maybe link to a live demonstration of the issue? – xec Feb 19 '12 at 14:24
  • Check here ... http://stackoverflow.com/questions/4674834/mega-menu-issues This should solve your problem. – ThreaderSlash Feb 19 '12 at 14:30
  • @xec - i have added a screenshot if that helps show you the menu getting cut off behind an image – leora Feb 19 '12 at 14:58
  • @xec - I am able to reproduce this on their examples page so i have added a link and a screenshot from the menu examples page – leora Feb 21 '12 at 15:45

4 Answers4

4

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

[Here are] some resources which explain the issue:

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:

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • thanks . . .works like a charm . . . any ideas around this menu IE issue: http://stackoverflow.com/questions/9372436/why-doesnt-a-select-dropdown-show-up-in-menu-on-ie-but-shows-up-fine-in-firefox – leora Feb 22 '12 at 01:29
1

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

Community
  • 1
  • 1
FelipeAls
  • 21,711
  • 8
  • 54
  • 74
  • i can reproduce the issue on the examples page so i have now included a link in the question to that page and a screenshot highlighting the issue i am seeing – leora Feb 21 '12 at 15:45
0

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.

DC1
  • 74
  • 6
0

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

segun
  • 1