Drop Down Menu appears behind all content

I've having the same problem, opposite browsers; I have the menu appearing behind another 'nicemenu' in Safari and FireFox, but not in IE.

I had both problems in both FF and IE. If you have two different menus, they need different z-index settings. For the menu that was appearing behind my block of content (in my case, a rotating banner), I set z-index on the banner as well: "topmost" menu at 10, second menu at 5, and block at 0 did the trick.

Unless this is in a core theme, it is a support request.

if you got a problem in theming your css then use firefox then download firebug plug in.. after downloading and installing the firebug. at the right buttom of your firefox browser you can see the icon of firebug then click the icon, a window will appear then there's a button INSPECT. you can edit your code..

I had this problem using a zen-based theme. It was caused by having the #navigation element with overflow: hidden in the layout.css - Perhaps this is the cause of the above issues?

I had to change that in #navbar for the problem I was seeing when running with Firefox. The comment reads "May need to be removed if using a dynamic drop-down menu".

I had the same problem. In my case it is a problem with IE. What I did was RESIZE the text encoding setting in EI and it then worked well. Im not a programmer and doesnt know much about codes so I just left a message "This site runs well using Mozilla Firefox. If you are using EI, just adjust your browser's Text Size to "Smaller".

someone had a similar problem and i posted this: http://drupal.org/node/355499#comment-1187475

the gist of which is that i would advise tinkering around with any of the elements that are giving you problems; something should eventually work.

failing that, start building your menu again from scratch, or remove a line at a time from your css and refresh your page each time and you might figure it out that way.

I fixed this problem on my site with the following:

1. Make note of what "region" the menu is in...for me, it is in my "sidebar first"
2. In my CSS, the "sidebar first" had "overflow: hidden"
3. I changed this to "overflow: visible"

The overflow setting for each region seems to override the z-index so overflow needs to be configured to "visible" in order for menu children to not be hidden behind content. It worked for me...hope it helps.

no response from OP on suggestions so closing

I had this problem as well with IE 7

Using the Wireframe theme, I wound up trying everyone's suggestions - but what worked was combining all the stylesheets onto 1 and then applying a z-index of 1 to the navigation layer and now everything's appearing as it should.

Thanks for creating this, btw.

I had the same problem - not showing properly in FF anf Chrome. I have cutomised my Fusion theme. The solution was simple thou hard to identify:
open your grid css file that is used to display your site (themes\fusion\fusion_core\css) and add
overflow: visible;
to your grid

for me it was changing
.grid16-16 {width: 960px;
}

into
.grid16-16 {width: 960px;
overflow: visible;
}

Good luck everyone, and remember to use firebug for FF to help you out with theme problems :)

I also ran into this problem using the Fusion theme Acquia Marina. Czoper's CSS code did not work for me, but it did help me find the following solution.

In my case, I placed a Nice Menu in the Header Top region of the theme. I placed this CSS into the theme stylesheet:

.block-nice_menus,
#header-top.row {
overflow: visible !important;
}

Since I created my own custom copy of the Acquia Marina theme, called fusion_lazor, this CSS went at the bottom of the file themes\fusion_lazor\css\fusion-lazor-style.css.

Hope this helps =)