Ajuda para vizualizacao do MegaMenu primefaces

Boas colegas, estou com problema em relação ao componente MegaMenu do primefaces gostava que os componentes ficassem visiveis aos usuários mais eles ficam escondidos por tras do componentes central, então gostaria de trazer para frente. Como poderei fazer isso? Tentei usar um css externo e chamar mais infelizmente não resultou então decidi usar css inline também não resoltou. Abaixo deixo imagens

Código do menu

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://java.sun.com/jsf/facelets">

    <h:form>

        <h3
            style="font-size: 1.3em; margin: 0; margin-left: 2%; font-weight: 1.5; padding: 5px;"
            align="center">Administrador</h3>
        <p:menu style="border:none; width:95%;">


            <p:menuitem icon="ui-icon-check" value="Estoque de produtos"
                outcome="/pages/productos.xhtml" />
            <p:menuitem icon="ui-icon-person" value="Funcionários"
                outcome="/pages/funcionarios.xhtml" />
            <p:menuitem icon="ui-icon-tag" value="Departamentos"
                outcome="/pages/departamentos.xhtml" />


        </p:menu>

        <p:megaMenu orientation="#{MBIncludesBean.orientation}"
            style="border:none;">
            <p:submenu label=" Consultar ações">
            <p:column>
                <p:submenu label="Consultar Historiais">
                    <p:menuitem value="Historial de entradas"
                        outcome="/pages/entradaProductos.xhtml" />
                    <p:menuitem value="Historial de saídas"
                        outcome="/pages/saidaProductos.xhtml" />

                    <p:menuitem value="Historial de requisições"
                        outcome="/pages/requisicoes.xhtml" />
                    <p:menuitem value="Historial de produtos"
                        outcome="/pages/historialProducto.xhtml" />
                    <p:menuitem value="Historial de departamentos"
                        outcome="/pages/historialDepartamento.xhtml" />
                    <p:menuitem value="Historial de funcionários"
                        outcome="/pages/historialFuncionario.xhtml" />
                </p:submenu>
            </p:column>
            </p:submenu>
        </p:megaMenu>
    </h:form>

</ui:composition>

codigo CSS

@charset "ISO-8859-1";


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


.ui-widget, .ui-widget .ui-widget {
    font-size: 95% !important;
}

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

}

Topicos relacionados