How to fix primefaces p:megaMenu issue in p:layout?

Question

How can I use p:megaMenu in p:layout? The content of layout cover menu contents. Let's me know any solution or any suggestion.

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

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

As below image :

Answer 1

I got some solution from Primefaces forum. I fixed the problem by changing CSS. It works well now.

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

   ......