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

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

Answer 1

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

无论如何，你可以使菜单组件看起来像这样的菜单栏：

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

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

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

如何在PrimeFaces中制作水平菜单

1 个答案: