PrimeFaces超级菜单隐藏在中心内容后面，左边和右边。右侧栏

Question

我在模板标题上显示<p:megaMenu>。

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

<p:megaMenu>与PrimeFaces展示中显示的相同，如显示的链接（默认链接）所示。

看起来像following。

当弹出此菜单时，它会隐藏在内容栏后面（<p:layoutUnit position="center"...>和左侧栏中，可以在快照中看到）。

我尝试过以下CSS类。

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

但无济于事。

如何解决这个问题？如何在内容栏上显示<p:megaMenu>并离开＆amp;右边的酒吧？

Answer 1

需要覆盖以下CSS类。

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

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

---

同样在这种特殊情况下，问题中显示的style标记的<span>属性需要修改如下。

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

删除overflow-y: hidden;属性（不必要），即使已覆盖上述CSS类，它也不会起作用。