在 css 中为具有多层嵌套结构的导航菜单（如 elementor 生成的 mega menu）添加 `border-radius` 时，若直接设置 `overflow: hidden` 会导致子菜单不可见；本文提供安全、兼容且可维护的修复方法。
当为 .sub-menu.wpr-sub-menu 添加 border-radius 并配合 overflow: hidden 时，子菜单（尤其是深层嵌套的二级菜单）突然消失，根本原因在于：overflow: hidden 不仅裁剪圆角区域，还会强制截断所有溢出其盒模型的内容——包括绝对定位（position: absolute）的子菜单项。Elementor 默认将下拉菜单设为 position: absolute 且脱离文档流，其定位通常基于父级 <li> 或 <a> 元素；一旦父级 .wpr-sub-menu 设为 overflow: hidden，即使子菜单 left/top 值合法，也会被视觉裁剪。
✅ 正确做法是 避免在包含绝对定位子元素的容器上使用 overflow: hidden，转而采用更精准的圆角控制：
方案一：分层设置单边圆角（推荐）
利用伪类或层级关系，只为菜单“可视区域”添加圆角，避开定位干扰：
/* 主下拉菜单（第一层）：顶部圆角 */
ul.sub-menu.wpr-sub-menu:not(.wpr-sub-menu .wpr-sub-menu) {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* 二级下拉菜单（嵌套在 li 内部）：底部圆角 */
ul.sub-menu.wpr-sub-menu .sub-menu.wpr-sub-menu {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}✅ 优势：无需 overflow: hidden，完全兼容绝对定位子菜单；语义清晰，层级可控。
方案二：用 clip-path 替代 overflow: hidden
现代浏览器中，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，如需兼容旧版浏览器，请回退至方案一。
方案三：检查并修正父容器布局约束
有时问题根源不在 .wpr-sub-menu 本身，而在其父级 <li> 或 <ul> 存在隐式限制：
/* 检查并重置可能干扰的样式 */
.menu-item-has-children > .sub-menu {
position: absolute !important; /* 确保定位模式明确 */
top: 100% !important;
left: 0 !important;
margin-top: 0 !important;
}
/* 移除父级意外的 overflow: hidden */
.menu-item-has-children {
overflow: visible !important; /* 关键！防止父级截断 */
}? 调试建议：在浏览器开发者工具中逐级检查 .menu-item-32242 → .sub-menu.wpr-sub-menu 的 computed overflow、position、height 和 max-height，确认无 height: 0、max-height: 0 或 overflow: hidden 等隐藏陷阱。
? 总结：
- ❌ 避免对含 position: absolute 子元素的菜单容器直接设 overflow: hidden + border-radius；
- ✅ 优先采用「单边圆角分层应用」策略，兼顾视觉一致性与功能完整性；
- ✅ 必要时用 clip-path 实现无副作用圆角；
- ✅ 务必审查 DOM 层级中的 overflow 继承链与定位上下文，从根源解除约束。
