Primefaces cobrindo menu CSS

é porque você está utilizando um layout se não me engano. Eu tive problemas similares a este pouco tempo atrás. O insert que você têm é self dentro da camada de importação do conteúdo, porém ao invocar o seu próximo insert você estará colocando ele acima do componente anterior, por isso que isso está acontecendo. Faça esse teste antes de tudo, coloque em uma mesma página o conteúdo com o menu e veja se fica tudo bem.

Este problema já estava acontecendo antes de eu tranferir o menu para o layout, porém como não interferia no desenvolvimento fui deixando mais agora está chegando perto do prazo de entrega tenho que corrigir.

Olá amigos,

Estou com o mesmo problema. Eu fiz um teste há tempos atrás utilizando layoutUnit q ocorria este erro (nos proprios componentes do primefaces).

Decidi usar um menu css só que como tem um panel logo abaixo, o menu é sobreposto por esse panel. Renderizei ele depois e mesmo assim não adiantou. Poxa, eu só estou utilizando primefaces por causa de alguns componentes específicos que preciso (para fotos) senão eu voltava para o RichFaces. Tem alguma outra solução para este problema ? Eu vi uma vez um esquema de alterar o css .overlay, algo assim mas na época que fiz o teste, não funcionou também.

Fiz o que foi citado. Renderizei tudo junto para ver se não era problema com facelets (que estou utilizando) mas não adiantou também.

Saudações,
Rodrigo Bortolon

Infelizmente também não solucionei meu problema ainda.

E eu pensando que o primefaces seria a solução para os meus problemas. :?

Amigos, depois de ocorrido este problema, resolvi utilizar o próprio componente do Primefaces, o menubar. Ele não tem esse problema de sobreposição pois não uso layoutUnit. Somente facelets.

Só que aí começa a guerra pois a gente tem que “adivinhar” os nomes dos estilos para customizar o menu. Eu sei que na documentação temos lá os seguintes estilos:

Style Class Applies
.wijmo-wijmenu Container element of menu
.wijmo-wijmenu-horizontal Container element of menu
.wijmo-wijmenu-list List container
.wijmo-wijmenu-item Each menu item
.wijmo-wijmenu-link Anchor element in a link item
.wijmo-wijmenu-text Text element in an item

Só que ao configurar o menu com estas classes vi que ao selecionar o submenu, o menu pai voltava para a cor branca (theme blitzer). Aí tive que fazer o uso do firebug (complemento do firefox) para achar o nome do css. Achado o nome, pesquisei na internet e vi que no svn do primefaces há lá uma config tipo esta que é referente ao tema (http://code.google.com/p/primefaces/source/browse/themes/trunk/ui-lightness/src/main/resources/META-INF/resources/primefaces-ui-lightness/theme.css?r=3962). Procure por menu.css neste mesmo endereço que vai entender.

Aí fui fazendo as configurações de acordo com o que precisava no meu sistema (cores e efeitos).

Vai aqui uma dica para todos de como ficou meu css para o menu que utilizei. Ah, outra coisa, arranquei toda a firula de cantos arredondados dos menus e componentes do primefaces. Eu partilarmente não gosto e assim ficou (está no fim do arquivo menu.css com prefixo .ui-corner)

Para testar, basta inserir este css no seu sistema porém como comentei, esta última parte de configuração com cantos arredondados eu já retirei da minha classe menu.css e migrei para outro geral do sistema ok?

@CHARSET "UTF-8";

.wijmo-wijmenu, .wijmo-wijmenu-horizontal {
	background: none !important;
 	background-color: #434343 !important;
	margin: 0px !important;
 	padding: 0px !important;
 	border:0px !important;
}
.wijmo-wijmenu-text {
	background: none !important;		
 	font-family: calibri !important;
 	font-weight:bold !important;
 	font-size: 13px !important;
 	color: #FFFFFF !important;
}	   		
.wijmo-wijmenu-list {
	background: none !important;
	color: #FFFFFF !important;
	background-color: #434343 !important;
	margin: 0px !important;
	/* bordas submenu */
	padding: 0px !important;
	border-color: red;
}
.wijmo-wijmenu-item {
	background: none !important;
	color: #FFFFFF !important;
	background-color: #434343 !important;
}
.ui-state-hover {
	background: none !important;
	color: #FFFFFF !important;
	background-color: #777 !important;  
	border-color: #777 !important;	 	
}
/* Manter menu com cor específica ao selecionar submenu */
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
	 border: 0px; 
	 background: none; 
	 background-color: #777 !important;
 }
 		 
 /* Responsavel por retirar as bordas arredondadas */
.ui-corner-tl { -moz-border-radius-topleft: 0px; -webkit-border-top-left-radius: 0px; border-top-left-radius: 0px; }
.ui-corner-tr { -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px; }
.ui-corner-bl { -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px; }
.ui-corner-br { -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; }
.ui-corner-top { -moz-border-radius-topleft: 0px; -webkit-border-top-left-radius: 0px; border-top-left-radius: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px; }
.ui-corner-bottom { -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px; -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; }
.ui-corner-right {  -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; border-top-right-radius: 0px; -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; border-bottom-right-radius: 0px; }
.ui-corner-left { -moz-border-radius-topleft: 0px; -webkit-border-top-left-radius: 0px; border-top-left-radius: 0px; -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; border-bottom-left-radius: 0px; }
.ui-corner-all { -moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; }

Saudações,
Rodrigo Bortolon

Consegui resolver o problema usando a propriedade CSS no meu menu:

z-index: 9999;