如何更改菜單欄中子菜單的標籤顏色？

我想使用菜單欄更改子菜單的標籤顏色。我使用的代碼如下：如何更改菜單欄中子菜單的標籤顏色？

<?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>

我使用的是PrimeFaces'的主題具有白色字體，每一個菜單，CSS樣式表，這臺白色的每個文本的顏色，但標籤代辦和Outillages不會變成白色。我也試着改變它的屬性。它適用於菜單項，但不適用於子菜單。

文本顏色必須是白色，背景暗藍色（在CSS樣式表上定義），但我不必不惜一切代價使用PrimeFaces。

我使用NetBeans 7.2和3.4.2 PrimeFaces

如果有人能幫助我，我就獎勵他一個cookie

謝謝！

來源

2012-11-26 WhiskThimble

您的問題背後的原因是

.ui-widget-content a

寫在primefaces CSS規則是壓倒你的內嵌樣式

瞭解更多關於CSS規則優先級here，參考SO質疑here

添加樣式類屬性到您的子菜單。

如：

<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>

而CSS添加到您的網頁

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

您也可以使用下面的CSS設置子菜單（彈出式）的背景下，

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

而且我建議你使用firebug（firefox插件）來檢查CSS，這在大多數情況下解決了這個問題。

希望這會有所幫助。

來源

2012-11-27 04:24:10

如何更改菜單欄中子菜單的標籤顏色？

回答

相關問題