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

在您当前的移动端导航实现中，子菜单（如 Outdoor Kitchens 下的 Appliances 列表）使用了 position: absolute 定位（见

CSS 中 ul#navMenu ul 规则），这会导致子菜单脱离文档流——即使被触发显示，也不会占据实际高度，从而让后续的兄弟菜单项（如 CabanaX、PergolaX）仍保持原有位置，造成视觉上的文字重叠。

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

Outdoor Kitchens

）展开其子菜单时，子

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

? 具体修改步骤（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），配合语义化交互控制，即可让移动端菜单层次清晰、逐级展开、互不干扰。