Primefaces - Change background of tabView tabs - css

Question

I am working with PrimeFaces and trying to edit the background color of my tabView menu items but am unable to do so.
This is what is required:
I am adding the styleClass attribute in xhtml. (Writing "..." instead of the long lists of attribute values that are not relevant to the problem.)
<p:tabView styleClass="menu" value="..." dir="..." dynamic="true" activeIndex="...">
<p:ajax event="tabChange" listener="..." />
<p:tab >
<div> .... </div>
</p:tab>
</p:tabView>
The html generated is:
<div id="tabView" class="..... menu">
<ul class="...." role="tablist">
<li class="...." role="tab" aria-expanded="true">
Menu Item 1
</li>
<li class="...." role="tab" aria-expanded="true">
Menu Item 2
</li>
</ul>
<div class="ui-tabs-panels">
<div > ..... </div>
</div>
The class menu is defined as following. The commented lines are the ones I have tried but give different results than required.
.menu {
font-family: Open Sans;
/* first attempt:
background-size: 5px;
background-color: #fff;
*/
/* second attempt:
background: linear-gradient(180deg, #FFF 10px, #ebeff2 100%);
*/
/* third attempt:
background-color: #fff;
*/
}
.menu ul li {
background-color: #fff;
background-image: url(../resources/images/menu_sep.png);
}
The output is this:
From what I understand, the problem is that the html generated applies my menu class to the <div> element, not the <ul>. Is there any way of adding this class to the <ul> tag? I have tried adding styleClass="menu" to the <p:ajax> and <p:tab> tags, but that does not work.
The Primefaces version is 3.5.

Answer 1

One way to apply the style class to the <ul /> element is to override the default TabView renderer. But i think this is a little bit excessive. Why not using the style class menu as an anchor only and create some style with a css selector like .menu > ul to style the list item under the <div /> element like you already did with the <li /> elements with your .menu ul li style?