Mega menu renders under the page content

Jan 11, 2011 at 7:08 PM

Here's an example (I added the blue dashes around the <div class="s4-ca s4-ca-dlgNoRibbon">

To make sure that the issue is not with the z-index I set the following:

.s4-ca, .s4-ca-dlgNoRibbon { border: 3px dashed blue; z-index: 1; } ul#menu { z-index: 1000; }

I'm not having any issues with the site actions menu so this issue seems to be isolated to the mega menu.

Any thoughts/advise would be greatly appreciated!

Jan 11, 2011 at 7:51 PM

I fixed it.  div's with a z-index must have a position defined so I fixed it with CSS:


.s4-ca-dlgNoRibbon {
 border: 3px dashed blue;
 z-index: 1;
 position: inherit;
ul#menu {
 z-index: 1000;
 position: relative;