WordPress移动端下拉子菜单Hover显示功能调试求助

核心问题排查方向 #

• CSS优先级不足：主题自带的子菜单显示样式优先级高于自定义CSS，导致修改失效
• 移动端交互逻辑冲突：多数WordPress移动端菜单会用JS处理点击展开子菜单，可能强制子菜单保持显示状态
• 选择器与DOM结构不匹配：自定义CSS的选择器和实际生成的菜单HTML类名/层级对应不上

针对性解决步骤 #

1. 修正CSS选择器与优先级 #

假设你的菜单HTML结构如下：

<nav class="mobile-menu">
  <ul class="main-menu">
    <li class="menu-item menu-item-has-children">
      <a href="#">主菜单项</a>
      <ul class="sub-menu">
        <li class="menu-item"><a href="#">子菜单项</a></li>
      </ul>
    </li>
  </ul>
</nav>

使用高优先级CSS强制覆盖默认样式，实现hover显示逻辑：

/* 默认隐藏移动端子菜单 */
.mobile-menu .menu-item-has-children .sub-menu {
  display: none !important;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 主菜单hover时显示子菜单 */
.mobile-menu .menu-item-has-children:hover .sub-menu {
  display: block !important;
  visibility: visible;
  opacity: 1;
}

注意：如果主题用了dropdown-menu等其他类名代替sub-menu，需对应修改选择器。

2. 检查并调整主题JS逻辑 #

多数移动端菜单会通过JS实现点击展开子菜单，这会和hover逻辑冲突，需修改对应代码：

• 找到主题菜单JS文件（通常在js/目录下，如mobile-menu.js）
• 搜索toggleClass('active')、show()这类控制子菜单显示的代码，注释掉自动展开的逻辑
• 也可以添加hover事件处理替代原有点击逻辑：

// 给带子菜单的主菜单项绑定hover事件
document.querySelectorAll('.mobile-menu .menu-item-has-children').forEach(item => {
  item.addEventListener('mouseenter', () => {
    item.querySelector('.sub-menu').style.display = 'block';
  });
  item.addEventListener('mouseleave', () => {
    item.querySelector('.sub-menu').style.display = 'none';
  });
});

3. 检查PHP菜单生成逻辑 #

如果使用了自定义Walker类生成菜单，需确认是否强制添加了显示子菜单的代码：

wp_nav_menu(array(
  'theme_location' => 'mobile-menu',
  'menu_class' => 'main-menu',
  'walker' => new Custom_Menu_Walker(), // 检查该类是否硬编码子菜单显示
));

查看自定义Walker的start_lvl方法，是否存在style="display:block"或强制添加的显示类名，如有则删除。

4. 调试验证 #

• 打开浏览器开发者工具（F12），选中子菜单元素，查看「Elements」面板的样式列表，确认自定义CSS是否被覆盖（被划掉则说明优先级不足）
• 调整选择器优先级（比如添加父元素ID）或临时用!important验证效果
• 测试触摸设备的hover行为，必要时同时绑定touchstart事件适配

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