Elementor导航菜单子菜单间隙与边框异常问题求助

核心修复CSS #

直接添加以下代码到Elementor网站设置的自定义CSS面板，替换颜色值为你实际使用的颜色：

/* 统一子菜单项分隔线样式，清除异常黑线 */
.elementor-nav-menu .sub-menu li:not(:last-child) {
    border-bottom: 1px solid #e0e0e0!important; /* 替换成你的分隔线颜色 */
    box-shadow: none!important;
}

/* 修复子菜单边框与菜单项间的黑线 */
.elementor-nav-menu .sub-menu {
    border: 1px solid #e0e0e0!important; /* 替换成你的子菜单边框颜色 */
    box-shadow: none!important;
    overflow: hidden!important; /* 避免边框渲染溢出 */
}

/* 移除可能产生干扰的伪元素 */
.elementor-nav-menu .sub-menu li::after,
.elementor-nav-menu .sub-menu li::before {
    display: none!important;
}

高DPI屏幕补充修复 #

如果是高分辨率屏幕的像素对齐问题，再加上这段代码：

.elementor-nav-menu .sub-menu {
    transform: translateZ(0); /* 开启硬件加速，解决像素渲染偏差 */
}

调整说明 #

1. 替换代码中的颜色值为你菜单实际使用的颜色（和蓝框预期效果一致即可）
2. 若仍有残留，尝试给子菜单加上background-color: #ffffff!important;，覆盖底层可能透出的颜色
3. 代码生效后刷新页面，检查红框标注的异常区域是否恢复正常

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