WordPress Max Mega Menu插件导航栏下划线悬停效果无法显示求助

嗨，我太懂你这种代码逻辑看起来没问题，但效果就是死活不出来的郁闷了！结合你已经排查的那些点——CSS正确入队、无冲突hover效果、伪元素能在开发者工具里看到但始终是0宽度，我给你几个针对性的排查和解决方向：

1. 提升CSS选择器优先级 #

Max Mega Menu本身自带不少默认样式，很可能你的自定义CSS选择器权重不够，导致hover时的width: 100%被插件样式覆盖了。你可以给选择器加上导航容器的ID（一般默认是#mega-menu-primary，可以在开发者工具里确认）来提升权重：

#mega-menu-primary li.mega-menu-item > a.mega-menu-link {
    position: relative;
    color: #fff !important;
    text-decoration: none !important;
    overflow: visible; /* 防止伪元素被裁切 */
}

#mega-menu-primary li.mega-menu-item > a.mega-menu-link::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: rgb(233, 30, 99);
    transition: width 0.3s ease;
    z-index: 1; /* 确保不被其他元素遮挡 */
}

#mega-menu-primary li.mega-menu-item:hover > a.mega-menu-link::after {
    width: 100% !important;
}

#mega-menu-primary li.mega-menu-item:hover > a.mega-menu-link {
    background: transparent !important;
    color: #fff !important;
}

2. 检查a标签的overflow属性 #

如果菜单链接（a.mega-menu-link）被设置了overflow: hidden，哪怕伪元素宽度变成100%，也会被裁切得看不到。你可以在开发者工具里查看这个属性，要是存在的话，手动加overflow: visible覆盖它。

3. 强制刷新浏览器缓存 #

有时候浏览器会缓存旧的CSS文件，导致你新写的样式根本没加载进来。试试用Ctrl+F5（Windows）或Cmd+Shift+R（Mac）强制刷新页面，或者在主题的functions.php里给style.css加个版本号，强制浏览器拉取最新文件：

wp_enqueue_style( 'custom-style', get_stylesheet_uri(), array(), '1.0.1' );

4. 验证hover状态下的样式是否生效 #

在浏览器开发者工具里，选中对应的菜单项，手动勾选:hover状态，查看::after元素的width属性：

• 如果宽度还是0：说明选择器优先级不够，继续加强权重；
• 如果宽度是100%但看不到：检查伪元素的z-index、bottom值是否正确，或者有没有被菜单背景元素遮挡。

内容来源于stack exchange