Nice Menu drop down disappearing behind nearby panel content in IE7+

Still have problems if you use "z-index:1000000;" ??? ;)

Hi,
I am also getting the same problem in Ie 6/7/8. Dropdown menu hides behind image as well the text. So the problem is effectively with the whole panel.

I tried setting high value for z-index. But still getting same problem. Did anyone found solution for this?

Imran Khan
Project Manager
New Earth Marketing

this problem is a known issue with IE and some theme settings
take a look at the FAQs http://drupal.org/node/195157

try a different theme to see if your theme is causing this

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.

Assigning a high value to the menu itself did not work (li, ul). It worked with the div that wrapped the whole section, in my case the header section where my nice menu was contained.

This also worked for me after trying the FAQ remedies.

I just used the "Display Element Info" tool in the FireFox Web Developer toolbar to get the full list of parent elements wrapping my nice menu, e.g.:

div #page
div #header
div #top-nav
div #block-nice_menus-13 .block btype-nice_menus even
ul #nice-menu-1 .nice-menu nice-menu-down
li #menu-1863 .menuparent even last 

I then tried adding { z-index: 1000 !important; } to each one, working from the bottom up. Once I added it to #header, the menu worked properly.

IE is ridiculous.

Thank You, #5

Hours wasted on this, I should have known to apply a z-index rule, but was trying to get the menu to float over Flash too (Monoslideshow), so thought it was a wmode : transparent problem with that. Sigh. My feelings towards IE a little stronger than 'ridiculous' right now, but that's nothing new.

I can calm down now, thank you.

Happy to help. And to be clear, there's nothing rational about choosing "1000" for the z-index. I just used a huge number because I was in a rush and wanted to be damn sure the div was going to be at the top of the stack. You could (and probably should) use something like Firefox's web developer toolbar to pick a more rational z-index that's 1 larger than the highest one on the page.

I have this problem with IE 7 but not IE 6. I am using Garland and I am not quite sure where I should add the { z-index: 1000 !important; }. Which file I need to modify?!

I am using 6x-2.0dev version of this module.

I fixed this problem on my site by adding a conditional statement for IE7 with a position:static
The problem was with the div wrapping the menu.

Thanks obrigado, great tip also with the FireFox Web Developer toolbar. Quite a powerful tool.

After that I had to fix the admin menu, which was now disappearing behind the nice menu

#admin-menu {
z-index:1001 !important;
}

To prevent Thickbox pop-ups from having the menu bar above it, add this to your CSS:

#admin-menu, 
#TB_window, 
.TB_overlayBG {
z-index:1001 !important;
}

Although this tip didn't solve my issue. Setting the wmode of the fash to transparet did. See http://drupal.org/node/89472

Yes, thanks very much. This fix also worked for drupal 5 version.

Thanks post #5 -obrigado.

I had set my nav block to z-index: "a zillion"; but it still didn't work in IE7 - I didn't go far enough up the nested tree. In fact setting the topmost item to the high z-index didn't solve it for me. I didn't want to spend more time on the problem so I just set every single id in the nested divs holding the nav to z-index:1000 and it worked in IE7 and I'm going to just leave it that way.

Obrigado obrigado!
Thanks for the tip! Many, many thanks indeed!
Rosamunda

ps. For all other people out there that does not speak portuguese... obrigado means thank you :)

this fixed it all:

#block-nice_menus-1 {
overflow:visible;}

gr.

sven

THIS DID THE TRICK!!! THANKS A LOT BETANCOURT!