求助：如何调整Primefaces中子菜单（submenu）的宽度

我之前也碰到过PrimeFaces TieredMenu子菜单宽度不好调整的问题，默认样式的优先级确实有点棘手，你试的两种方法没生效大概率是选择器优先级不够或者样式作用的对象不对。下面给你几个可行的解决思路：

方案一：提升CSS选择器优先级（最直接） #

PrimeFaces的默认样式会给子菜单容器设置宽度，所以我们需要用更精准的选择器来覆盖它。试试这个CSS：

/* 针对所有TieredMenu的子菜单 */
.ui-tiered-menu .ui-menu-child {
    width: 160px !important;
}

• 解释：.ui-tiered-menu是整个TieredMenu组件的根类，.ui-menu-child是子菜单的下拉容器（生成的<ul>元素），组合起来选择器优先级更高；!important可以强制覆盖默认样式，如果你不想用!important，可以再加上更多层级的父类选择器来提升优先级，比如结合页面的容器类。

方案二：给Submenu加自定义样式类（更灵活） #

如果你只想调整某一个子菜单的宽度，可以给对应的<p:submenu>加自定义样式类，然后针对性设置：

1. 修改你的XHTML代码：

<p:submenu label="next" styleClass="custom-wide-submenu">
    <p:menuitem styleClass="MenuItems" value="edit" url=" "/>
    <p:menuitem styleClass="MenuItems" value="revert" url=""/>
</p:submenu>

2. 对应的CSS：

.custom-wide-submenu .ui-menu-child {
    width: 180px; /* 自定义宽度 */
}

• 注意：<p:submenu>的styleClass是加到了包含label的<li>元素上，所以我们需要选择它下面的.ui-menu-child（也就是下拉的子菜单容器），这样样式才能正确作用到目标元素。

方案三：调整最小宽度（适配内容场景） #

如果你的子菜单项文本长度不一，想让宽度适配内容同时有最小限制，可以用min-width：

.ui-tiered-menu .ui-menu-child {
    min-width: 160px;
    width: auto;
}

额外注意事项 #

• 确保你的自定义CSS是在PrimeFaces默认样式之后加载的，比如把样式代码放在页面的末尾，或者使用<f:facet name="last">来引入样式文件，这样才能保证自定义样式覆盖默认样式。
• 可以用浏览器的开发者工具（F12）查看子菜单元素的实际样式，检查你的自定义样式是否被应用，或者被哪些默认样式覆盖了，这样能更精准地调整选择器。

内容的提问来源于stack exchange，提问作者Padmaja