PrimeFaces: How to style (css) a menu in an accordionPanel

Tested with PrimeFaces 3.1

Before (with default css)

<p:accordionPanel>  
 <p:tab title="Foo tab title">  
  <p:menu>  
    <p:menuitem value="Foo menu item title" url="#" />
  </p:menu>
  </p:tab>
</p:accordionPanel>

Result:

After (with overriden css)

Just add the class "accordionMenu" to the accordionPanel:

<p:accordionPanel styleClass="accordionMenu">  
 <p:tab title="Foo tab title">  
  <p:menu>  
    <p:menuitem value="Foo menu item title" url="#" />
  </p:menu>
  </p:tab>
</p:accordionPanel>

.accordionMenu .ui-menu {
 width:100% !important; 
 
}
.accordionMenu .ui-accordion-content {
 padding:0 !important;
 overflow:inherit !important;
}

.accordionMenu .ui-helper-clearfix:after {
 height:inherit !important;
}

Result: