本文讲解如何修复移动端下拉菜单在悬停时子菜单项重叠的问题，核心是移除绝对定位并改用流式布局，确保父级菜单展开时自动撑开空间、避免文字覆盖。
在您当前的移动端导航实现中，子菜单（如 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），配合语义化交互控制，即可让移动端菜单层次清晰、逐级展开、互不干扰。
