本文详解如何在 WordPress 移动端导航中正确实现「悬停展开子菜单」效果，解决 .sub-menu 默认常显问题，通过精准 CSS 选择器控制显示/隐藏逻辑，并兼顾响应式兼容性。
本文详解如何在 wordpress 移动端导航中正确实现「悬停展开子菜单」效果，解决 `.sub-menu` 默认常显问题，通过精准 css 选择器控制显示/隐藏逻辑，并兼顾响应式兼容性。
在 WordPress 主题开发中，移动端下拉子菜单（Dropdown Submenu）常因 CSS 优先级、选择器范围或响应式断点设置不当，导致子菜单始终可见（display: block）或无法响应悬停交互。根据你提供的代码结构，核心问题在于：当前 .sub-menu 缺少默认隐藏声明，且悬停触发规则未精确绑定到具有子菜单的父级 <li> 元素上。
✅ 正确的 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 确保仅作用于直接子 <ul>，避免嵌套子菜单误触发；
- 添加 :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）提升特异性：
@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 类（推荐方案）：
<li class="menu-item-has-children" tabindex="0"> <a href="#">Help</a> <button class="sub-menu-toggle" aria-expanded="false">▼</button> <ul class="sub-menu">...</ul> </li>
配合轻量 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); }); });
✅ 最终验证步骤
- 清除浏览器缓存，强制重载 CSS；
- 在 Chrome DevTools → Emulation 中切换至 iPhone SE / Pixel 5，检查子菜单是否在点击后正常展开/收起；
- 使用键盘 Tab 导航至「Help」项，按 Enter 键确认子菜单可聚焦展开；
- 检查无障碍工具（如 axe DevTools）是否报告 aria-expanded 同步异常。
通过以上配置，你的移动端菜单将实现专业、可访问、跨设备一致的下拉交互体验——告别永久显示，拥抱精准悬停。
