Submenu do primefaces cortado

Front-end
#1

Pessoal criei um menu lateral a esquerda, dentro de uma layoutUnit, do lado direito tenho outra layoutUnit, com o conteudo.
O meu menu tem subitens que aparecem com o passar do mouse, o problema é que esse subitens estão ficando cortados, por tras da layoutUnit do conteudo, queria que ela ficasse por cima e não cortada como está.
Como posso alterar isso?

template.xhtml:

<h:body styleClass="body">        
        <p:layout fullPage="true">
            <p:layoutUnit id="topo" position="top" height="108">                
                <ui:insert name="topo">  
                    <ui:include src="topo.xhtml"/>  
                </ui:insert>                               
            </p:layoutUnit>
            <p:layoutUnit id="menu" position="left" header="Menu" width="250"
                          closable="false" collapsible="true" resizable="true">
                <ui:insert name="menu">  
                    <ui:include src="menu.xhtml"/>  
                </ui:insert>                
            </p:layoutUnit>
            <p:layoutUnit id="conteudo" position="center" height="400">                
                <ui:insert name="conteudo" /> 
            </p:layoutUnit>                                       
            <p:layoutUnit id="rodape" position="bottom" height="38">               
                <ui:insert name="rodape">    
                    <ui:include src="rodape.xhtml"/>  
                </ui:insert>  
            </p:layoutUnit>
        </p:layout>
    </h:body>

menu.xhtml:

<p:menu type="tiered" style="width: 200px; border: 0;">
            <p:submenu label="Cadastros" icon="ui-icon ui-icon-disk">
                <p:menuitem value="Produto" action="#" icon="ui-icon ui-icon-suitcase" ajax="false"/>
                <p:menuitem value="Fornecedor" action="#" icon="ui-icon ui-icon-cart" ajax="false"/>
                <p:menuitem value="Requisitante" action="#" icon="ui-icon ui-icon-person" ajax="false"/>
                <p:menuitem value="Departamento/Setor" action="#" icon="ui-icon ui-icon-pencil" ajax="false"/>
            </p:submenu>
            <p:submenu label="Movimentações" icon="ui-icon ui-icon-transferthick-e-w">
                <p:menuitem value="Entrada" action="#" icon="ui-icon ui-icon-arrowthickstop-1-n" ajax="false"/>
                <p:menuitem value="Saída" action="#" icon="ui-icon ui-icon-arrowthickstop-1-s" ajax="false"/>                
            </p:submenu>
            <p:submenu label="Requisições" icon="ui-icon ui-icon-note"></p:submenu>
            <p:submenu label="Relatórios" icon="ui-icon ui-icon-document">
                <p:submenu label="Link 1">
                    <p:menuitem value="1.1" url="#" ajax="false"/>
                    <p:menuitem value="1.2" url="#" ajax="false"/>
                </p:submenu>
                <p:menuitem value="Link 2" url="#" ajax="false"/>
            </p:submenu>
            <p:submenu label="Configurações" icon="ui-icon ui-icon-wrench">
                <p:menuitem value="Usuarios" action="#" icon="ui-icon ui-icon-person" ajax="false"/>
                <p:menuitem value="123" action="#" icon="ui-icon ui-icon-arrowthickstop-1-s" ajax="false"/>                
            </p:submenu>                                
            <p:menuitem value="Sair" icon="ui-icon ui-icon-power" 
                        action="#{usuarioController.logout}" ajax="false"/>
        </p:menu>

Por exemplo, o primeiro item do menu - Cadastro - tem 4 subitens, como no código acima, quando eu passo o mouse por cima do item Cadastro, abre os subitens do lado direito, mas abre cortado. Só aparece um pedaço.

#2

Atribua a tag

zindex="1"[/code] do seu [code]p:layoutUnit
#3

Mas em qual layoutUnit em coloco o zindex? Coloco 1 na layoutUnit menu, e 2 na conteudo, por exemplo?

#4

Consegui resolver com css:

.ui-layout .ui-layout-unit div.ui-layout-bd, .ui-layout-unit-left { z-index: 20 !important; overflow: visible !important; }

#5