PrimeFaces mega menu is hidden behind the centre contents, left & right side bars

I'm displaying a <p:megaMenu> on the header of template.

<p:layoutUnit id="topPanel" position="north" size="155" collapsed="false" resizable="false" closable="false" collapsible="false" gutter="6">

    <span style="position: absolute; top: 90px; width: 1360px; left: 0px; bottom: 0px; overflow-y: hidden;">




The <p:megaMenu> is the same as the one shown on the PrimeFaces showcase as indicated by the link shown (the default one).

It looks like the following.

When this menu is popup, it is hidden behind the content bar (<p:layoutUnit position="center"...> and the left side bar as can be seen in the snap shot).

I have tried with the following CSS class.

#topPanel {z-index:2 !important; }

but to no avail.

How to fix this? How to show <p:megaMenu> over the content bar and left & right side bars?


The following CSS classes need to be overridden.

.ui-layout-north {
    z-index: 20 !important;
    overflow: visible !important;

.ui-layout-unit-content {
    overflow:visible !important;

Also in this particular case, the style attribute of the <span> tag as shown in the question needs to be modified as follows.

<span style="position: absolute; top:90px; width:1360px; left:0px; bottom:0px;">

Removing the overflow-y: hidden; attribute (unnecessary) or it won't work even though the above CSS classes have been overridden.

Need Your Help

How to maintain a websocket open until proper closure?

tomcat websocket

I'm studying websocket and I tried the tomcat

Definition of "Created At and Updated At" database attributes

php mysql magento

Im trying to figure out what the best way to define the Created At and Updated At fields in a Custom Magento database table is.