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

Question

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

        <p:megaMenu>

        </p:megaMenu>

    </span>
</p:layoutUnit>

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?

Answer 1

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.