Da pra criar um arquivo do tipo CSS no projeto WEB e referenciar ele na página do menu, ficaria algo assim:
<h:head>
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/resources/theme/css/arquivo.css" />
</h:head>
Aí depois, dentro do CSS você define novas regras para o seu componente, algo assim:
.styleMenuTransparent{
background-color: transparent !important; /* cor de fundo */
background: transparent!important; /* cor de fundo*/
border: transparent!important; /* bordas*/
color: white; /* cor do texto */
/*aqui você coloca uma regra para aumentar a largura do seu componente*/
}
Aí no seu componente você só referencia aquela classe criada no CSS, assim:
<p:menubar id="menuPrincipal" model="#{menuController.menuModel}" styleClass="styleMenuTransparent" autoDisplay="false"/>
Já adiantando, é um pouco complicadinho acertar as alterações no CSS, tem que abrir pelo chrome ou firebug e identificar o componente certo que tem que ser alterado. Em alguns casos sobrescrever o CSS, algo assim:
.styleMenuTransparent .ui-widget-content .ui-menuitem-text{
color: black!important; /* cores submenus preta*/
}
Espero ter ajudado amigo.