Elementor+ElementsKit megamenu菜单项与子菜单hover间隙::after不生效求解

问题核心原因 #

::after伪元素必须声明content属性才会被浏览器渲染，你提供的所有CSS代码都没有加这个属性，这是伪元素不显示的首要原因。其次你没有给伪元素设置正确的定位，即便生成也无法正确填补菜单项和子菜单之间的间隙。

可行解决方案 #

方案1：修复伪元素CSS（推荐） #

直接使用以下CSS代码，同时解决伪元素渲染和定位问题：

/* 给父菜单项设置相对定位，作为伪元素的定位容器 */
#menu-new-main > li.menu-item-has-children {
    position: relative;
}

/* 生成填补间隙的透明伪元素 */
#menu-new-main > li.menu-item-has-children > a::after {
    content: ''; /* 必须声明，否则伪元素不会渲染 */
    display: block;
    width: 100%;
    height: 20px; /* 可根据实际间隙高度调整 */
    position: absolute;
    bottom: -20px; /* 数值和高度保持一致，刚好对齐a标签底部 */
    left: 0;
    background: transparent;
    z-index: 9999; /* 确保层级足够，不会被其他元素遮挡 */
}

如果样式被插件原有样式覆盖，可在每个属性末尾加!important提高优先级。

方案2：消除间隙（无需伪元素） #

如果伪元素始终无法生效，可直接调整子菜单的位置，让其和父菜单项重叠1-2px，完全消除间隙，也能解决hover断开问题：

#menu-new-main > li.menu-item-has-children .elementskit-dropdown {
    top: calc(100% - 2px) !important;
}

排查优先级 #

如果上述代码仍不生效，按以下顺序排查：

1. 打开浏览器开发者工具，检查对应a标签的样式面板，确认你写的CSS代码是否被加载到页面，没有被划掉
2. 检查ElementsKit菜单设置中是否有「禁用导航自定义图标」「隐藏链接装饰元素」之类的开关，这类开关会强制将::after伪元素设为display: none
3. 确认你添加CSS的位置正确：WordPress后台→自定义→额外CSS，或者Elementor的全局自定义CSS面板，不要加在局部页面的CSS里

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