Comment faire pour modifier l'étiquette de la couleur d'un sous-menu dans la barre de menu?

Je voudrais changer l'étiquette de la couleur d'un sous-menu, à l'aide de la barre de menu.
Le code que j'utilise est la suivante :

    <?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:form>
<h:panelGrid columns="1" style="font: 12px sans-serif;width:800px;height: 19px">
<p:menubar autoDisplay="false" style="padding: 0px">  
<p:menuitem value="Tableau de bord" action="#{liens.lienTableauDeBord()}" ajax="false" icon="ui-icon-home" style="padding-top: 0px;padding-bottom: 0px;color: white;background-color:#333367"/>
<p:menuitem value="|" disabled="true" style="padding-top: 0px;padding-bottom: 0px;color: white;background-color:#333367"/>
<p:submenu label="Affaires" style="margin-top: -4px; height: 22px;color: white;background-color:#333367"> 
<p:menuitem value="Création" action="#{liens.lienCreerAffaire()}" ajax="false" icon="ui-icon-document"/>  
<p:menuitem value="Consultation" action="#{liens.lienConsultationAffaire()}" ajax="false" icon="ui-icon-search"/>  
</p:submenu>  
<p:menuitem value="|" disabled="true" style="padding: 0px"/>
<p:submenu label="Outillages" style="margin-top: -4px;height: 19px"> 
<p:menuitem value="Création" action="#{liens.lienNumOutil()}" ajax="false" icon="ui-icon-document" style="padding: 0px"/>  
<p:menuitem value="Consultation" url="#" icon="ui-icon-search" style="padding: 0px"/>  
</p:submenu> 
<p:menuitem value="|" disabled="true" style="padding: 0px"/>
<p:menuitem value="Recherche et consultation DT" url="#" icon="ui-icon-search" style="padding: 0px"/>  
<p:menuitem value="|" disabled="true" style="padding: 0px"/>
<p:menuitem value="Paramètres" url="#" icon="ui-icon-wrench"  style="padding: 0px"/>
<p:menuitem value="|" disabled="true" style="padding: 0px"/>
<p:menuitem value="Déconnexion" url="#" icon="ui-icon-closethick" style="padding: 0px" /> 
</p:menubar>  
</h:panelGrid>
</h:form>
</ui:composition>

Je suis à l'aide d'un PrimeFaces", le thème qui a police blanche sur tous les menus, une feuille de style CSS qui définit chaque couleur du texte sur fond blanc, mais les étiquettes Affaires et Outillages ne va pas changer du blanc.
J'ai aussi essayé de modifier les attributs. Il travaille pour les menuitems mais pas pour le sous-menus.

La couleur du texte DOIT être de couleur blanche, et l'arrière-plan bleu fonce (tel que défini sur la feuille de style CSS), mais je n'ai pas à utiliser PrimeFaces à tout prix.

Je suis à l'aide de Netbeans 7.2 et PrimeFaces 3.4.2

Si quelqu'un peut m'aider, je vais vous récompenser avec un cookie

Merci!

OriginalL'auteur WhiskThimble | 2012-11-26

  1. 3

    La raison derrière votre problème est 

    .ui-widget-content a

    une règle css à l'écrit dans primefaces est remplacer vos styles en ligne

    Lire plus à propos de css règle de priorité ici de référence, DONC, la question ici

    Ajouter un style de classe attribut à votre sous-menu.

    e.g:

    <p:submenu styleClass="affaires" label="Affaires" style="margin-top: -4px; height: 22px;color: white;background-color:#333367"> 
<p:menuitem value="Création" ajax="false" icon="ui-icon-document"/>  
<p:menuitem value="Consultation" ajax="false" icon="ui-icon-search"/>  
</p:submenu>

    Et ajouter le css de votre page

    <style>
.affaires .ui-menuitem-text{color:white;}
</style>

    Vous pouvez également utiliser le css ci-dessous pour les sous-menu de configuration(popup) de fond,

    .affaires .ui-menu-child{background: blue;}

    Aussi je vous suggère d'utiliser firebug(plugin firefox) pour inspecter les css, ce qui résout le problème dans la plupart des cas.

    Espère que cette aide.

    OriginalL'auteur Sanjeevi.V