css - 如何在 PrimeFaces 中制作水平菜单

Question

我正在尝试修改 PrimeFaces Menu (不是 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 类覆盖菜单上的大部分样式。

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