如何在 PrimeFaces 中制作水平菜单

Question

我正在尝试修改PrimeFaces 菜单（不是 MenuBar），使其水平显示。

我正在尝试应用这样的样式：

<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>

在单独的 CSS 文件中，我有以下内容：

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

但是，我的样式总是被 PrimeFaces 样式覆盖（例如 .ui-menuitem）。

我希望有一个非全局的解决方案，因为我可能也需要垂直菜单，所以这排除了编辑主题的 CSS 文件。

Answer 1

我认为很奇怪，当菜单栏几乎完全相同时，您坚持不使用菜单栏。也许这是一个测试你的 CSS 和 Primefaces 知识的面试问题？

无论如何，您可以使菜单组件看起来像菜单栏，如下所示：

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

这应该使用 ui-menubar 类覆盖菜单上的大多数样式。

这当然不会那么好，因为悬停触发的子菜单不会像菜单栏那样出现在菜单下方。