3

我想使用菜单栏更改子菜单的标签颜色。我正在使用的代码如下：

    <?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 样式表将每个文本的颜色设置为白色，但标签Affaires和Outillages不会变为白色。我也尝试用属性来改变它。它适用于菜单项，但不适用于子菜单。

文本颜色必须为白色，背景为深蓝色（在 CSS 样式表中定义），但我不必不惜一切代价使用 PrimeFaces。

我正在使用 Netbeans 7.2 和 PrimeFaces 3.4.2

如果有人可以帮助我，我会奖励他一个饼干

谢谢！

4

1 回答 1

3

你的问题背后的原因是

.ui-widget-content a

用 primefaces 编写的 CSS 规则覆盖了您的内联样式

在此处阅读有关 css 规则优先级的更多信息，在此处参考 SO 问题

将样式类属性添加到您的子菜单。

例如：

<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-27T04:24:10.907 回答