WordPress 移动端下拉子菜单悬停显示实现教程-html教程-PHP中文网

本文详解如何在 WordPress 移动端导航中正确实现「悬停展开子菜单」效果，解决 .sub-menu 默认常显问题，通过精准 CSS 选择器控制显示/隐藏逻辑，并兼顾响应式兼容性。

本文详解如何在 wordpress 移动端导航中正确实现「悬停展开子菜单」效果，解决 `.sub-menu` 默认常显问题，通过精准 css 选择器控制显示/隐藏逻辑，并兼顾响应式兼容性。

在 WordPress 主题开发中，移动端下拉子菜单（Dropdown Submenu）常因 CSS 优先级、选择器范围或响应式断点设置不当，导致子菜单始终可见（display: block）或无法响应悬停交互。根据你提供的代码结构，核心问题在于：当前 .sub-menu 缺少默认隐藏声明，且悬停触发规则未精确绑定到具有子菜单的父级

元素上

。

✅ 正确的 CSS 解决方案

只需两行语义清晰、高优先级的 CSS 规则即可解决：

/* 默认隐藏所有子菜单 */
ul.sub-menu {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 悬停时显示父级为 menu-item-has-children 的子菜单 */
.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu {
  display: block;
  position: static; /* 避免被父级 overflow: hidden 裁剪 */
  top: 100%;
  left: 0;
  z-index: 1000;
}

? 关键说明：

使用 > .sub-menu 确保仅作用于直接子
，避免嵌套子菜单误触发；

添加 :focus-within 支持键盘导航（无障碍友好），满足 WCAG 标准；

position: static 替代 absolute 可规避移动端 Safari/Chrome 中因父容器 overflow: hidden 或 transform 导致的子菜单不可见问题（常见于 .site-mobile-menu-container 类）。

⚠️ 注意事项与常见陷阱

媒体查询冲突：你在 @media (min-width: 601px) 中隐藏了 .primary-menu-container，但移动端菜单（.mobile-menu）实际在 max-width: 600px 下生效。请确保上述 CSS 规则置于移动断点内，或使用更宽泛的选择器（如 #mobile-menu .sub-menu）提升特异性：

Wordpress REST API
OpenClaw技能，提供WordPress REST API命令行工具，支持通过原生HTTP处理文章、页面、分类、标签、用户及自定义请求。

下载
```
@media (max-width: 600px) {
  #mobile-menu .sub-menu {
    display: none;
  }
  #mobile-menu .menu-item-has-children:hover > .sub-menu,
  #mobile-menu .menu-item-has-children:focus-within > .sub-menu {
    display: block;
  }
}
```
JavaScript 干扰风险：你代码中存在 twentytwentyoneExpandSubMenu(this) 调用，该函数可能强制操作 aria-expanded 和 display。若启用此 JS，需同步修改其逻辑——禁用 JS 展开行为，完全交由 CSS 悬停控制，否则会出现状态不一致（如按钮显示“已展开”但 CSS 仍隐藏）。
移动端触摸兼容性：纯 :hover 在 iOS/Android 触屏设备上无原生悬停态。若需真·触控支持（点击展开），应改用 :focus + tabindex 或 JavaScript 切换 active 类（推荐方案）：
Help

配合轻量 JS：

document.querySelectorAll('.menu-item-has-children').forEach(item => {
  item.addEventListener('click', e => {
    e.preventDefault();
    const sub = item.querySelector('.sub-menu');
    const expanded = sub.style.display === 'block';
    sub.style.display = expanded ? 'none' : 'block';
    item.querySelector('.sub-menu-toggle').setAttribute('aria-expanded', !expanded);
  });
});