Elementor Pro菜单悬停下划线动画仅首个元素正常问题求助

问题根源 #

1. 过渡属性未全局配置：仅在:hover状态添加transition，导致鼠标离开时没有过渡动画，样式直接重置
2. 选择器覆盖不全：可能误将动画逻辑只绑定到首个菜单项，或初始状态样式未对所有目标菜单项生效
3. 伪元素初始状态缺失：下划线伪元素未设置固定的初始宽度、位置，离开时无法触发平滑过渡

修复代码与步骤 #

1. 全局设置下划线基础样式 #

给所有需要下划线的菜单项（排除logo项）配置初始状态和过渡属性：

/* 排除logo项，替换为你实际的logo菜单项类名 */
.wp-menu li:not(.menu-logo-item) > a {
  position: relative !important;
  display: inline-block !important;
}

.wp-menu li:not(.menu-logo-item) > a::after {
  content: "" !important;
  position: absolute !important;
  bottom: -3px !important; /* 调整下划线与文字的间距 */
  left: 0 !important;
  width: 0 !important;
  height: 2px !important;
  background-color: #2c3e50 !important; /* 替换为你的下划线颜色 */
  transition: width 0.3s ease-in-out !important; /* 全局绑定过渡动画 */
}

2. 配置hover触发逻辑 #

仅在hover时修改下划线宽度，过渡效果继承自基础样式：

.wp-menu li:not(.menu-logo-item) > a:hover::after {
  width: 100% !important;
}

3. 粘性头部适配 #

如果粘性头部切换时颜色冲突，添加粘性状态下的样式覆盖：

/* 替换为你实际的粘性头部容器类名 */
.sticky-header .wp-menu li:not(.menu-logo-item) > a::after {
  background-color: #ffffff !important; /* 粘性状态下的下划线颜色 */
}

关键注意点 #

• 必须将transition属性放在伪元素的基础样式中，而非仅在:hover状态，确保鼠标移入/移出都能触发平滑动画
• 用li:not(...)精准排除logo菜单项，避免不必要的样式生效
• 确保菜单项的<a>标签设置了position: relative，否则伪元素的绝对定位会脱离目标元素

内容的提问来源于stack exchange，提问作者Erik James Robles