如何在 Primefaces 中为 p:menubar 定义背景？答案

【问题标题】：How to define background for p:menubar in Primefaces?如何在 Primefaces 中为 p:menubar 定义背景？
【发布时间】：2013-09-20 23:02:35
【问题描述】：

如何在 Primefaces 中为 <p:menubar> 定义背景

<p:menubar rendered="#{loginBO.flag=='admin'}" autoSubmenuDisplay="True" style="background-image: url('images/ui-bg_gloss-wave_55_5c9ccc_500x100_png.png')">
    <p:menuitem value="Home" url="/RMGHome.xhtml" icon="ui-icon-home" />
    <p:menuitem value="Filter Search" action="#{leftMenuService.getMenuList}" icon="ui-icon-search" />
</p:submenu>

【问题讨论】：

标签： css jsf-2 primefaces background menubar

【解决方案1】：

像这样：

.ui-menubar,.ui-menu-child,.ui-menu {
    background: #004e8e !important;
}

【讨论】：

请用自己的话解释为什么您认为!important hack 是必要的。如果你做对了，那就不是。
这不是技术解释。这只是一个症状的图片。如果选择器不够具体和/或带有选择器的 CSS 文件在 PrimeFaces 默认 CSS 之前被错误加载，则傻瓜通常会应用 !important hack。您只需要根据适当的 CSS 级联和继承规则来修复 CSS 加载和声明，而不是在没有真正理解问题的情况下退回到 !important hack。另见stackoverflow.com/questions/8768317/…
感谢您解释 BalusC 和 Lamq :)

【解决方案2】：

我也使用了菜单栏，我用 css 更改了菜单栏的背景颜色，例如：

首先，我给了一个 styleClass <p:menubar styleClass="menubar"> 然后给它下面的css选项：

<style>
	.menubar {
	  background-color: lightblue;
	}
		
</style>

<p:menubar styleClass="menubar">
  <p:menuitem value="Main Page" url="index.xhtml" icon="ui-icon-home"></p:menuitem>
</p:menubar>

将上述样式标签写入<head></head>标签。希望对你有用。

【讨论】：