如何解决移动端导航菜单项悬停时内容重叠的问题

本文讲解如何修复移动端下拉菜单在悬停时子菜单项重叠的问题，核心是移除绝对定位并改用流式布局，确保父级菜单展开时自动撑开空间、避免文字覆盖。

在您当前的移动端导航实现中，子菜单（如 Outdoor Kitchens 下的 appliances 列表）使用了 position: absolute 定位（见 css 中 ul#navMenu ul 规则），这会导致子菜单脱离文档流——即使被触发显示，也不会占据实际高度，从而让后续的兄弟菜单项（如 CabanaX、PergolaX）仍保持原有位置，造成视觉上的文字重叠。

✅ 根本解决方案：
在移动视图（@media (max-width: 768px)）中，移除所有嵌套下拉菜单的 position: absolute 及相关偏移（如 top, left），改用标准的块级流式布局。这样当某个父菜单项（如

）展开其子菜单时，子

会自然占据页面高度，将下方菜单项“推下去”，彻底消除重叠。

? 具体修改步骤（CSS）：

/* 在 @media only screen and (max-width: 768px) 媒体查询内，替换或删除以下规则： */ ul#navMenu ul {   /* ❌ 删除这些导致脱离文档流的声明 */   /* position: absolute; */   /* left: 0; */   /* top: 100%; */   /* display: none; */ /* 改为用 JS 或 :hover 控制显隐更稳妥 */ }  /* ✅ 替换为：让子菜单作为普通块元素存在 */ ul#navMenu ul {   display: none; /* 默认隐藏 */   margin: 0;   padding-left: 1.5rem; /* 缩进提升可读性 */   background-color: #f9f9f9; }  /* 悬停/激活时显示子菜单（移动端建议用 JS 控制，见下文优化建议） */ #navMenu.active li:hover > ul, #navMenu.active li:focus-within > ul, #navMenu.active li.toggled > ul {   display: block; }

? 配套 javaScript 增强（推荐）：
由于移动端无真正“hover”，仅靠 :hover 不可靠（尤其触屏设备）。建议为每个含子菜单的

• 添加点击切换逻辑：

  // 在现有 mobileMenu() 后添加 document.querySelectorAll('#navMenu .nav-item').forEach(item => {   const submenu = item.querySelector('ul');   if (submenu) {     item.addEventListener('click', e => {       e.preventDefault();       item.classList.toggle('toggled');       // 可选：关闭其他已展开项（手风琴效果）       document.querySelectorAll('#navMenu .nav-item.toggled').forEach(el => {         if (el !== item) el.classList.remove('toggled');       });     });   } });

  并在 CSS 中补充：

  #navMenu.active .nav-item.toggled > ul {   display: block; }

  ⚠️ 注意事项：

  • 移除 position: absolute 后，需检查子菜单宽度是否适配屏幕（建议设 width: 100% 或 max-width: 100%）；
  • 为提升可访问性，建议为展开/折叠按钮添加 aria-expanded 和 aria-controls 属性；
  • 若需动画效果，可用 max-height + overflow: hidden 替代 display: none/block 实现平滑过渡。

  ✅ 总结：重叠本质是脱离文档流所致。回归标准文档流（position: Static + display: block），配合语义化交互控制，即可让移动端菜单层次清晰、逐级展开、互不干扰。