在为 wordpress elementor 构建的多级导航菜单（如 mega menu）添加 `border-radius` 时，若同时设置 `overflow: hidden` 会导致子菜单被裁剪不可见；根本原因在于父容器尺寸未自适应子内容，或存在定位/高度限制。本文提供安全、兼容的解决方案。
当为 .sub-menu.wpr-sub-menu 添加 border-radius 并配合 overflow: hidden 时，子菜单（尤其是嵌套的二级下拉项）突然消失，这并非 border-radius 本身的问题，而是 overflow: hidden 触发了新的块格式化上下文（BFC），并强制裁剪所有溢出其计算尺寸的内容——而 Elementor 生成的菜单常依赖 position: absolute、transform 动画或固定 height/max-height，导致实际内容被意外截断。
✅ 正确解决路径如下：
1. 优先排查并移除干扰样式
检查浏览器开发者工具（Elements → Computed），确认 .wpr-sub-menu 是否被以下任一规则限制：
- height / max-height（如 max-height: 0 或 200px）
- position: absolute 但 top/left 偏移错误或父容器未设 position: relative
- clip-path、transform: scale(0) 等动画残留样式
推荐临时重置关键属性以验证：
立即学习“前端免费学习笔记（深入）”；
ul.sub-menu.wpr-sub-menu {
height: auto !important;
max-height: none !important;
overflow: visible !important; /* 先确保内容可见 */
}2. 安全添加圆角：分层控制边框半径（推荐）
避免对整个 .wpr-sub-menu 应用 overflow: hidden，改用「分角控制」策略，既保留视觉圆角，又不触发裁剪：
/* 仅给最外层子菜单（第一级下拉）加顶部圆角 */
ul.sub-menu.wpr-sub-menu:not(.wpr-sub-menu .sub-menu) {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
overflow: hidden; /* 此时安全：仅顶部需裁剪阴影/背景溢出 */
}
/* 给最内层子菜单（如 Partner1/2/3 所在的二级下拉）加底部圆角 */
ul.sub-menu.wpr-sub-menu .sub-menu {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}✅ 优势：每个 overflow: hidden 仅作用于明确需要圆角的局部区域，且内容始终在可视区域内渲染，彻底规避裁剪风险。
3. 进阶方案：使用 clip-path 替代 overflow: hidden
若需统一圆角且兼容现代浏览器（Chrome 55+, Firefox 54+, Safari 13.1+），可用 clip-path 精确裁剪，不影响布局流：
ul.sub-menu.wpr-sub-menu {
clip-path: inset(0 0 0 0 round 5px); /* 等效于 border-radius: 5px */
/* 不再需要 overflow: hidden */
}⚠️ 注意：IE 不支持 clip-path，如需兼容旧版浏览器，请回退至分角方案。
总结
- ❌ 错误做法：直接对含绝对定位子项的菜单容器设 border-radius + overflow: hidden；
- ✅ 正确做法：先确保容器尺寸自适应（height: auto, position: relative 父级），再通过 border-*-radius 分层控制或 clip-path 精准裁剪；
- ? 调试口诀：「先显后美」——确保子菜单 100% 可见，再叠加视觉优化。
这样即可在 Elementor 生成的 WordPress 菜单中，安全、稳定地实现圆角设计，同时保持所有层级子菜单完整可见。
