jquery - 如何修复 p:layout 中的 primefaces p:megaMenu 问题？

Question

p:megaMenu我该如何使用p:layout？布局内容覆盖菜单内容。让我知道任何解决方案或任何建议。

模板.xhtml

<p:layout fullPage="true">
   <p:layoutUnit position="north" size="40">
        <ui:include src="/common/menu.xhtml"/>
   </p:layoutUnit>
   <p:layoutUnit position="center">
        <ui:insert name="content"/>
    </p:layoutUnit>
   <p:layoutUnit position="south" size="40">
        <ui:include src="/common/footer.xhtml"/>
   </p:layoutUnit>
</p:layout>

菜单.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui">
       <h:form id="menuForm">
        <p:megaMenu autoDisplay="false">
            <p:menuitem value="Dashboard" action="dashboard" ajax="false" immediate="true"/>  
            <p:submenu label="Report">
                <p:column>
                    <p:submenu label="Agent">
                        <p:menuitem value="Agent Commission Detail Report" action="agentCommissionDetailReport" ajax="false" immediate="true"/>  
                        <p:menuitem value="Agent Information Report" action="agentInformationReport" ajax="false" immediate="true"/>  
                        <p:menuitem value="Sales Report" action="salesReport" ajax="false" immediate="true"/>  
                    </p:submenu>
                </p:column>
            </p:submenu>
        </p:megaMenu>
    </h:form>
</ui:composition>

如下图：

Answer 1

我从 Primefaces 论坛得到了一些解决方案。我通过更改 CSS 解决了这个问题。现在效果很好。

<h:head>
    <style>
        #topPanel {z-index:2 !important; }
        #topPanel div{overflow:visible;}
    </style>
</h:head>

<p:layout fullPage="true">
   <p:layoutUnit position="north" size="50" id="topPanel">
        <ui:include src="/common/menu.xhtml"/>
   </p:layoutUnit>

   ......