菜单展开样式异常通常因CSS未响应aria-expanded状态变化，需确保属性正确设置、选择器精准匹配、避免display冲突及高优先级样式覆盖。
菜单展开时样式不对，通常是因为 CSS 没有正确响应状态变化。使用 [aria-expanded="true"] 是一种语义清晰、可访问性友好且无需 JS 操作 class 的方式，但要让它生效，得满足几个关键条件。
确保 aria-expanded 属性被正确设置
这个选择器只在元素上真实存在 aria-expanded="true" 时才匹配。常见问题包括：
- JS 里只改了 class 或 visibility，却忘了同步更新
aria-expanded - 初始 HTML 中没写
aria-expanded="false"，导致首次渲染无法通过属性选择器控制默认收起态 - 拼写错误，比如写成
aria-expaned或用了大写Aria-Expanded（HTML 属性名不区分大小写，但建议统一小写）
CSS 选择器写法要准确
别漏掉中括号，也别加多余空格。正确写法示例：
.menu-trigger[aria-expanded="true"] + .menu-list {
max-height: 500px;
opacity: 1;
visibility: visible;
}
<p>.menu-list[aria-expanded="true"] {
display: block;
}注意：[aria-expanded="true"] 只匹配值**完全等于** "true" 的元素；如果 JS 设置的是 "true" 字符串（推荐），就匹配；若设为布尔 true（某些框架自动转换），实际 DOM 中可能不显示或变成空字符串，导致选择器失效。
立即学习“前端免费学习笔记（深入）”；
避免 display: none 和 aria-expanded 冲突
如果菜单默认用 display: none 隐藏，又用 [aria-expanded="true"] 切换为 display: block，要小心父容器的布局影响（比如高度塌陷、动画不生效）。更稳妥的做法是结合 visibility、opacity 和 max-height 做渐变展开：
- 收起态：
max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; - 展开态：
max-height: 300px; opacity: 1; visibility: visible; - 加上
transition: max-height 0.3s ease, opacity 0.2s, visibility 0s 0.2s控制时序
检查是否被更高优先级样式覆盖
打开浏览器开发者工具，选中展开后的菜单元素，看 [aria-expanded="true"] 对应的样式是否被划掉。常见干扰来源：
- 内联 style（如
style="display: none"），它优先级高于任何 CSS 选择器 - 其他 class 选择器权重更高，比如
.menu-list.open比.menu-list[aria-expanded="true"]权重高（class vs 属性，class 略高） - 用了
!important强制覆盖，建议删掉，改用更精准的选择器
基本上就这些。只要 aria 属性实时准确、CSS 选择器写对、过渡逻辑合理，样式就能稳稳跟上状态。不复杂但容易忽略细节。
