嵌套导航菜单li重叠问题求助（max-width:960px场景）

核心问题分析 #

你的问题本质是子菜单脱离了文档流，导致展开时无法撑开父级<li>元素，进而和下方菜单重叠。即使替换display为opacity/visibility，如果子菜单的position属性仍为absolute，依然不会占据文档流空间，无法实现向下推送的效果。

具体修复步骤 #

1. 调整移动端子菜单的定位方式
   移除子菜单的position: absolute设置，改为默认的static（可省略，默认即为该值），让子菜单回到文档流中：

   @media (max-width: 960px) {
     .menu li ul {
       position: static; /* 替换原absolute定位 */
       width: 100%;
       /* 保留背景、内边距等原有美观样式 */
     }
   }
   

2. 修复二级子菜单的重叠问题
   二级子菜单同样需要取消绝对定位，同时可通过缩进区分层级，避免和父级内容重叠：

   @media (max-width: 960px) {
     .menu li ul ul {
       position: static;
       margin-left: 20px; /* 按需调整缩进大小 */
     }
   }
   

3. 实现平滑展开过渡（可选）
   若需要展开/收起的动画效果，避免使用display: none，改用max-height结合过渡属性实现：

   @media (max-width: 960px) {
     .menu li ul {
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.3s ease;
     }
     .menu li.active ul {
       max-height: 500px; /* 设置为足够容纳子菜单的高度值 */
     }
   }
   

验证要点 #

• 检查移动端媒体查询内的所有子菜单样式，确保无position: absolute、float这类会脱离文档流的属性。
• 确认子菜单width设为100%，避免宽度不足导致内容换行重叠。

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