本文详解如何通过纯 css 实现 wordpress 移动端导航中「悬停展开子菜单」效果，解决子菜单默认常显问题，无需 javascript 即可完成响应式下拉交互。
本文详解如何通过纯 css 实现 wordpress 移动端导航中「悬停展开子菜单」效果，解决子菜单默认常显问题，无需 javascript 即可完成响应式下拉交互。
在 WordPress 主题开发中，移动端菜单（尤其是使用 wp_nav_menu() 渲染的自定义菜单）常因 CSS 选择器不精确或媒体查询干扰，导致 .sub-menu 子菜单始终可见，违背“仅在悬停时展开”的设计预期。从你提供的代码可见：HTML 结构已正确生成带有 menu-item-has-children 类的父项及嵌套
- ；CSS 中虽尝试了 .sub-menu { display: none; }，但缺少关键的悬停触发规则与作用域限定，且被后续媒体查询中的冲突样式（如 #access ul li:hover > ul { display: none; }）覆盖。
✅ 正确解法是使用后代选择器 + :hover 伪类精准绑定父子关系：
WordPress API Pro
下载
生产级WordPress REST API集成，用于管理文章、页面、媒体、WooCommerce产品、Elementor内容、SEO元数据、ACF及JetEngine字段
/* 确保所有子菜单默认隐藏 */
.mobile-menu .sub-menu {
display: none;
}
/* 当父菜单项（含 menu-item-has-children 类）被悬停时，显示其直接子 .sub-menu */
.mobile-menu .menu-item-has-children:hover > .sub-menu {
display: block;
position: static; /* 避免绝对定位被父级 overflow 隐藏 */
margin-top: 5px; /* 可选：增加与父项间距 */
}
⚠️ 注意事项：
- 避免使用 #nav-primary 等未在 HTML 中出现的 ID —— 你的结构中实际容器是 #mobile-menu 和 .menu-mobile-container，应以 .mobile-menu 为根选择器确保作用域准确；
- 移除冲突规则：检查并删除类似 #access ul li:hover > ul { display: none; } 这类反向覆盖代码（你 CSS 中已存在该错误声明）；
- 移动端兼容性提醒：纯 :hover 在触摸设备（如手机）上无悬停态，因此该方案仅适用于桌面端或平板横屏模式。若需全端支持，必须结合 JavaScript（如 twentytwentyoneExpandSubMenu）控制 aria-expanded 与 display 切换，并用 @media (hover: hover) 媒体查询做条件启用；
- 层级与定位优化：为防止子菜单被裁剪，建议为父 li 添加 position: relative;，并确保 .sub-menu 使用 position: absolute; top: 100%; left: 0; 实现精准下拉定位（当前 CSS 中已有部分相关样式，需统一补全）：
.mobile-menu .menu-item-has-children {
position: relative;
}
.mobile-menu .sub-menu {
position: absolute;
top: 100%;
left: 0;
background: white;
min-width: 200px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
z-index: 1000;
}
? 总结：核心在于「精准选择器 + 父子关系绑定 + 清理干扰样式」。先用上述 CSS 替换你原有的 .sub-menu 规则，再验证桌面端效果；如需兼顾移动端点击展开，请扩展 JavaScript 逻辑，监听 .sub-menu-toggle 按钮并切换 .sub-menu 的 display 与 aria-expanded 属性——这才是真正健壮的响应式下拉菜单实现方式。
