How to make a horizontal menu in PrimeFaces

Question

I am trying to modify a PrimeFaces Menu (not MenuBar) so that it displays horizontally.

I am trying to apply styles like so:

<h:form>
    <p:menu styleClass="horizontalMenu">
        <p:menuitem value="Home" url="./home.xhtml"/>
        <p:menuitem value="Contact Us" url="./contactUs.xhtml"/>
        <p:menuitem value="Shop" url="./shop.xhtml"/>
    </p:menu>
</h:form>

Where in a separate CSS file I have the following:

.horizontalMenu li {
    display:inline;
    float:none;
}

However, my styles are always overridden by PrimeFaces styles (.ui-menuitem, for example).

I was hoping for a solution that wasn't global, as I may need vertial menu's too, so this rules out editing a theme's CSS file.

Answer 1

I think its strange that you are insisting on not using the Menubar when it is the exact same thing pretty much. Perhaps this is an interview question to test your CSS and Primefaces knowledge?

Regardless, you can make a Menu component look like a Menubar like this:

<p:menu styleClass="ui-menubar" style="width: auto;">

This should override most of the styles on the menu with the ui-menubar class.

This of course will not be as good because the onhover triggered submenus will not appear below the menu as they would with the menubar.