Menubar e layout - primefaces

Front-end
#1

E ae galera,

Estou criando um template aqui com o primefaces. Estou utilizando o p:layoutUnit para dividir o layout.
O problema está que no centro eu preciso dividir a tela em MENU: 20% CONTEUDO: 80%. Quando o menu abre, ele não consegue sobrepor o centro, aí corta pela metade o menu.
Alguém tem alguma sugestão?

Abraços!

#2

Código:


    <body>
        <p:layout> 
            <p:layoutUnit position="north" size="20%">
                <p:layout>     
                    <p:layoutUnit position="north" size="70%">
                                             
                    </p:layoutUnit>  
                    
                    <p:layoutUnit position="center">  
                        <p:menubar  styleClass="ui-widget-header">  
                            <p:submenu label="File" icon="ui-icon-document">  
                                <p:submenu label="New" icon="ui-icon-contact">  
                                    <p:menuitem value="Project" url="#" />  
                                    <p:menuitem value="Other" url="#" />  
                                </p:submenu>  
                                <p:menuitem value="Open" url="#" />  
                                <p:separator />  
                                <p:menuitem value="Quit" url="#" />  
                            </p:submenu>  
                            <p:submenu label="Edit" icon="ui-icon-pencil">  
                                <p:menuitem value="Undo" url="#" icon="ui-icon-arrowreturnthick-1-w" />  
                                <p:menuitem value="Redo" url="#" icon="ui-icon-arrowreturnthick-1-e" />  
                            </p:submenu>  
                        </p:menubar>
                    </p:layoutUnit>
                    
                </p:layout>   
                
            </p:layoutUnit>             
            
            <p:layoutUnit position="center">  
                <ui:insert name="centro">
                        O que estiver aqui será substituido!
                </ui:insert>
            </p:layoutUnit>
        </p:layout> 
    </body>
#3

Resolvi esse problema.

Solução:

    <style type="text/css">
        .ui-layout-north {
            z-index:20 !important;
            overflow:visible !important;;
        }

        .ui-layout-north .ui-layout-unit-content {
            overflow:visible !important;
        }
    </style>

Abraços

#4