为下拉菜单添加圆角时避免内容被裁剪的完整解决方案

✅ 正确做法是 避免在包含绝对定位子元素的容器上使用 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 本身，而在其父级

存在隐式限制：

/* 检查并重置可能干扰的样式 */ .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 继承链与定位上下文，从根源解除约束。