移动端响应式导航子菜单展开重叠问题求助

核心问题原因 #

移动端垂直菜单中，子菜单通常被设置为position: absolute，脱离了文档流，导致hover展开时直接覆盖下方的顶级菜单项，无法撑开父元素预留空间。

具体修复步骤 #

1. 调整子菜单定位方式

将移动端下的子菜单从绝对定位改为静态定位（static），让它回到文档流中，展开时自然占据空间：

@media (max-width: 768px) {
  .nav-dropdown {
    position: static; /* 替换原来的position: absolute */
  }
}

2. 取消顶级菜单项的固定高度

确保顶级菜单项高度自适应，由内容撑开，避免限制子菜单展开的空间：

@media (max-width: 768px) {
  .nav-item {
    display: block;
    height: auto; /* 移除固定height值 */
    padding: 12px 16px; /* 保持合适内边距，提升点击体验 */
  }
}

3. 优化子菜单交互（推荐触摸友好）

移动端没有原生hover事件，建议改用点击切换子菜单展开状态，同时保留桌面端的hover效果：

• CSS调整：

/* 移动端默认隐藏子菜单，通过类控制展开 */
@media (max-width: 768px) {
  .nav-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    position: static;
  }
  .nav-dropdown.show {
    max-height: 500px; /* 根据子菜单实际内容调整高度 */
  }
}

/* 桌面端保留hover展开 */
@media (min-width: 769px) {
  .nav-item:hover .nav-dropdown {
    display: block; /* 或原有的hover样式 */
  }
}

• JS添加点击交互：

// 绑定移动端点击事件
function bindMobileNavEvents() {
  document.querySelectorAll('.nav-item').forEach(item => {
    item.addEventListener('click', (e) => {
      e.stopPropagation(); // 避免触发汉堡菜单的点击事件
      const dropdown = item.querySelector('.nav-dropdown');
      dropdown.classList.toggle('show');
    });
  });
}

// 窗口大小变化时适配
window.addEventListener('resize', () => {
  document.querySelectorAll('.nav-item').forEach(item => {
    item.removeEventListener('click', () => {});
  });
  if (window.innerWidth <= 768) {
    bindMobileNavEvents();
  }
});

// 初始化时绑定
if (window.innerWidth <= 768) {
  bindMobileNavEvents();
}

4. 清理冗余层级设置

如果仍有覆盖问题，移除子菜单或父元素上不必要的z-index设置，避免层级混乱。

内容的提问来源于stack exchange，提问作者Garreth