Last updated November 9, 2010. Created on November 25, 2007.
Edited by musicnode, add1sun, AlexisWilke, tenek. Log in to edit this page.

These are some common questions and issues that come up.

  • Ack! It's totally broken!
  • My menus get cut off (usually sidebar menus that pop sideways.)
  • My menus are going behind x element (e.g. a content div or the page text, etc.) in IE.
  • That didn't help, my menus are going behind my Flash.
  • Fix for IE where child items appear behind it's parent's sibling
  • Example: How floated sidebars in themes can support Nice Menus
  • Trouble with IE7 and Nice Menus
  • Ack! It's totally broken!
    The menus may not work perfectly with all themes. Try Nice Menus out with the default Garland or Bluemarine first to check if it works there (it should) before filing a bug report or trying to write a patch for other themes.
  • My menus get cut off (usually sidebar menus that pop sideways.)
    This will happen in contributed or custom themes that use overflow: hidden; to contain the sidebar contents. Nice Menus must be able to "overflow" over the content in order to expand properly. Some themes will break if you remove or override this condition. You will need to play with the CSS and determine if Nice Menus can be used with your theme. There is an issue where this is discussed. These are some themes known to have this issue:
    - Barlow
    - Sky
    - Zen starterkit (Primary link dropdown will go behind content div)
  • My menus are going behind x element (e.g. a content div or the page text, etc.) in IE.
    IE has some problems with z-indexes in CSS. Sometimes the way to fix that is to add position: relative; to a parent element but Nice Menus already does so. Therefore it shouldn't be a problem. You WILL have a problem sometimes, though, if other elements on your page use position: relative; as well. Basically if you have this problem, you need to review your CSS for the elements where the problem is happening and check to see if the position is set. Try removing it to see if that clears the problem. There is an issue in the queue that discusses this.
    Possible work-arounds to consider:
    - Fix for IE where child items appear behind its parent's sibling
    - Example: How floated sidebars in themes can support Nice Menus
  • That didn't help, my menus are going behind my Flash.
    This is an issue with Flash and there is nothing that Nice Menus can do to fix it. You can get the menus to appear over a Flash animation by adding the wmode="transparent" attribute in the EMBED tag, or <param name="wmode" value="transparent">. It seems that setting wmode to "opaque" also works. See #89472: slideshow modules overlap nice menus drop down (not just in IE) for more information.
  • Trouble with IE7 and Nice Menus
    Check the DOCTYPE you're using in your custom template if you're having trouble with Nice Menus in IE7. If IE7 thinks it needs to go into a backwards-compatible "quirks mode" for web pages written to an older HTML standard, a workaround script meant to detect IE6 might not notice. That seems to be the case with 6.x-1.3 where the child menu simply was not coming out at all in IE7 while it worked in Safari and Firefox.

    Here's the old DOCTYPE, often used out of habit:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    Switching to this one solve the problem:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    For reference:
    http://www.quirksmode.org/css/quirksmode.htmlhttp://hsivonen.iki.fi/doctype/

  • Trouble with IE8, nice menus and CUFON font replacement. When IE renders the page and CUFON triggers the text dissapears.
    You can fix this by changing from using visible to display in css,
    The code for that is here: http://drupal.org/node/834636#comment-3153714
    For IE8, you may have to use this code: http://drupal.org/node/834636#comment-3203742

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

nellsworth’s picture

I had a complex issue on my site, and I wanted to share my fix - to try to demonstrate the process and hopefully help others.

First, the situation:
http://testsite.untoldthegame.com/battle

One Nice Menu stacked on top of another (two different div areas). Both menus are over a page built with panels utilizing rounded corners.

For IE the top menu was disappearing behind the bottom menu, and both were disappearing behind the rounded corners of the panels. For Firefox the top menu was disappearing behind the bottom menu.

The solution:

  • 1. Understanding the problem - I read a lot of the Nice Menu Issues and they all pointed to the root cause: CSS errors and conflict between ‘position: relative’ components and ‘z-index’.
  • 2. Understanding z-index, and duplicating my problem utilizing some web tools.
  • 3. I developed a fix: Every ‘position: relative’ item MUST be given a ‘z-index’.
    • .t-edge, .b-edge, .l-edge, .r-edge, .wrap-corner{z-index: 1;}
    • Nice menus in different div regions requires 2 different z-index values.
    • Delete the z-index in the Nice Menu’s CSS
    • Provide CSS in your theme’s CSS file, for me:
      • #nav_main ul.nice-menu, ul.nice-menu ul, ul.nice-menu li {z-index: 3;}
      • #nav_local ul.nice-menu, ul.nice-menu ul, ul.nice-menu li {z-index: 2;}

And, amazingly, the pages works!

I hope its a little clearer than mud, and I hope this helps.

Wandering Men Studios - http://www.wanderingmen.com
Untold - A card based RPG - http://www.untoldthegame.com

JimBehr’s picture

I had been struggling for several hours with the same problem in IE7. I followed the above steps and now the menu displays properly. Thank you very much for posting this solution!

--

      Jim
      Arbor Internet Technologies - Solutions that extend your reach

funky2D’s picture

I removed relative position in all my nice menu related blocs and then it works !
thanks cause i found it to your post http://drupal.org/node/351677

just in case it's may help someone else

BernieCram’s picture

Thanks for your comment here it helped to point me in the right direction. I was working with a Ninesixty based theme and it relies on relative divs for the layout. I needed a solution which would work without having to worry about giving everything a z-index and found this info on a jquery solution : http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/

I used the code there as a base and just added an if statement to ensure that jquery was loaded. I read this somewhere I'm not any sort of expert. It ended up looking like this.

if (Drupal.jsEnabled) {
$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
}

Put this in script.js in your theme folder, or make a text file script.js and put that in your theme folder. Everything will automatically get a z-index in order to display as expected in IE7.

Bernie

BernieCram’s picture

I have found that the above technique doesn't play well with the admin menu module because that writes to the end of the html. so is allocated low z-index. I have just been using admin module instead.

Also if you have a lot of stuff going on, you may need to decrement the zIndexNumber by 5 rather than 10 otherwise you wont be able to access things because they have been given negative z-indexes (like when you're setting up content in Panels).

dalehgeist’s picture

Thanks for this. I didn't want this to fire for all browsers, so I wrapped it in a browser detection statement. It now reads like this:

if (navigator.appVersion.indexOf("MSIE 7.") != -1) {
if (Drupal.jsEnabled) {
$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
}
}

It worked perfectly - thanks again.

faclab’s picture

The first time I created a Nice Menu for the Main Menu and assigned that block to the Navigation region, my menu was displayed twice. Being fairly new to Drupal, I didn't realize that I needed to deselect the Main Menu in my theme's Toggle Display settings to prevent it from being displayed more than once.

These settings are located under Appearance » 'Your Theme' » Settings in Drupal 7.

Turn the Main Menu off here and your Nice Main Menu should appear only once.

Kevin Shoesmith
Factory Interactive

aschiwi’s picture

Nice Menus comes with stylesheets and basic styling. It's pretty painful to have to override these styles for every project so I turned to a trick to stop the nice menus stylesheets from getting called. Add the following code to your theme's info file:

; exclude nice_menus stylesheet
stylesheets[all][] = sites/all/modules/nice_menus/nice_menus_default.css
stylesheets[all][] = sites/all/modules/nice_menus/nice_menus.css

I haven't tried this in Drupal 7 but it might work as well.

ionmedia’s picture

how it can prevent from loading default style?

in code we trust

darkdante’s picture

Hello,

is it possible to have the oppsoite of menu style (down)?

So the menu get´s expanded up?

Thank you.

Regards,
john

balaexpress’s picture

hi
i have installed Nice Menu Module, but i dont know how to enable or configure the drop down menu in Main Menu(i.e. parent Link) in Nice menu Module. please could you help me?
i have seen some websites constructed by nice menu module, there they have done drop down menu in main menu block nicely
http://www.newearthmarketing.com/

please help me how to enable the drop down menu in main menu block

Balakrishnan
Drupal Website Developer

wselvais’s picture

I saw on your site you could make it work. How did you fix it?

pbhatt’s picture

On the instruction page it say: "Look at your page source and see what the number is on Event Calendar. Put this number in place of the 103 in the CSS at the following block."

When I look at my page source there is no number for Event Calender all it says is: "

"

Can someone help me please?

Thanks.

wselvais’s picture

How did you make it work?