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">

http://lh4.ggpht.com/__UhC-1fc3Ig/TSypr4wsBII/AAAAAAAAC_0/6ojouIYYOyY/s512/MegaMenu.png.jpg

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,
.s4-ca-dlgNoRibbon {
 border: 3px dashed blue;
 z-index: 1;
 position: inherit;
}
ul#menu {
 z-index: 1000;
 position: relative;
}