如何在 PrimeFaces 中制作水平菜单
我正在尝试修改 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 文件。
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.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我认为很奇怪，当菜单栏几乎完全相同时，您坚持不使用菜单栏。也许这是一个测试你的 CSS 和 Primefaces 知识的面试问题？
无论如何，您可以使 Menu 组件看起来像 Menubar，如下所示：
这应该使用 ui-menubar 类覆盖菜单上的大多数样式。
这当然不会那么好，因为悬停触发的子菜单不会像菜单栏那样出现在菜单下方。
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:
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.