title: How to change the label's color of a submenu in a menubar?
body: <p>I would like to change the label's color of a submenu, using the menubar.
  The code I am using is the following :</p>
  
  <pre><code>    &lt;?xml version='1.0' encoding='UTF-8' ?&gt;
  &lt;!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                  xmlns:h="http://java.sun.com/jsf/html"
                  xmlns:p="http://primefaces.org/ui"&gt;
  
      &lt;h:form&gt;
  
                  &lt;h:panelGrid columns="1" style="font: 12px sans-serif;width:800px;height: 19px"&gt;
                      &lt;p:menubar autoDisplay="false" style="padding: 0px"&gt;  
                          &lt;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"/&gt;
                          &lt;p:menuitem value="|" disabled="true" style="padding-top: 0px;padding-bottom: 0px;color: white;background-color:#333367"/&gt;
                          &lt;p:submenu label="Affaires" style="margin-top: -4px; height: 22px;color: white;background-color:#333367"&gt; 
                              &lt;p:menuitem value="Création" action="#{liens.lienCreerAffaire()}" ajax="false" icon="ui-icon-document"/&gt;  
                              &lt;p:menuitem value="Consultation" action="#{liens.lienConsultationAffaire()}" ajax="false" icon="ui-icon-search"/&gt;  
                          &lt;/p:submenu&gt;  
                          &lt;p:menuitem value="|" disabled="true" style="padding: 0px"/&gt;
                          &lt;p:submenu label="Outillages" style="margin-top: -4px;height: 19px"&gt; 
                              &lt;p:menuitem value="Création" action="#{liens.lienNumOutil()}" ajax="false" icon="ui-icon-document" style="padding: 0px"/&gt;  
                              &lt;p:menuitem value="Consultation" url="#" icon="ui-icon-search" style="padding: 0px"/&gt;  
                          &lt;/p:submenu&gt; 
                          &lt;p:menuitem value="|" disabled="true" style="padding: 0px"/&gt;
                          &lt;p:menuitem value="Recherche et consultation DT" url="#" icon="ui-icon-search" style="padding: 0px"/&gt;  
                          &lt;p:menuitem value="|" disabled="true" style="padding: 0px"/&gt;
                          &lt;p:menuitem value="Paramètres" url="#" icon="ui-icon-wrench"  style="padding: 0px"/&gt;
                          &lt;p:menuitem value="|" disabled="true" style="padding: 0px"/&gt;
                          &lt;p:menuitem value="Déconnexion" url="#" icon="ui-icon-closethick" style="padding: 0px" /&gt; 
                      &lt;/p:menubar&gt;  
                  &lt;/h:panelGrid&gt;
  
      &lt;/h:form&gt;
  
  
  
  &lt;/ui:composition&gt;   
  </code></pre>
  
  <p>I am using a PrimeFaces' theme which has white font on every menus, a CSS stylesheet which sets every text's color on white but the labels <em>Affaires</em> and <em>Outillages</em> won't change to white.
  I also tried to change it with the attributes. It works for the <em>menuitems</em> but not for the <em>submenus</em>.</p>
  
  <p>The text color MUST be white, and the background darkblue (as defined on the CSS stylesheet), but I don't have to use PrimeFaces at all costs.</p>
  
  <p>I'm using Netbeans 7.2 and PrimeFaces 3.4.2</p>
  
  <p>If someone can help me, I'll reward him with a cookie</p>
  
  <p>Thanks!</p>