java 如何更改菜单栏中子菜单的标签颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13567851/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the label's color of a submenu in a menubar?
提问by WhiskThimble
I would like to change the label's color of a submenu, using the menubar. The code I am using is the following :
我想使用菜单栏更改子菜单的标签颜色。我使用的代码如下：
<?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>
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 Affairesand Outillageswon't change to white. I also tried to change it with the attributes. It works for the menuitemsbut not for the submenus.
我正在使用 PrimeFaces 的主题，它在每个菜单上都有白色字体，一个 CSS 样式表将每个文本的颜色设置为白色，但标签Affaires和Outillages不会更改为白色。我也试图用属性来改变它。它适用于menuitems但不适用于submenus。
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.
文本颜色必须为白色，背景为深蓝色（如 CSS 样式表中所定义），但我不必不惜一切代价使用 PrimeFaces。
I'm using Netbeans 7.2 and PrimeFaces 3.4.2
我使用的是 Netbeans 7.2 和 PrimeFaces 3.4.2
If someone can help me, I'll reward him with a cookie
如果有人可以帮助我，我会用饼干奖励他
Thanks!
谢谢！
采纳答案by Sanjeevi.V
The reason behind your problem is
你的问题背后的原因是
.ui-widget-content a
a css rule written in primefaces is overriding your inline styles
用 primefaces 编写的 css 规则覆盖了您的内联样式
Read more about css rule priority here, reference SO question here
Add a style class attribute to your sub 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>
And add the css to your page
并将css添加到您的页面
<style>
.affaires .ui-menuitem-text{color:white;}
</style>
Also you can use the below css for setting submenu(popup) background,
你也可以使用下面的 css 来设置子菜单（弹出）背景，
.affaires .ui-menu-child{background: blue;}
Also i suggest you to use firebug(firefox plugin) to inspect css, this solves the problem in most case.
另外我建议你使用firebug（firefox插件）来检查css，这在大多数情况下解决了这个问题。
Hope this helps.
希望这可以帮助。
