CSS实现类Facebook/Instagram移动端横向导航时mega menu无法展开问题

冲突根本原因 #

你给导航容器ul设置了overflow-x: auto + overflow-y: hidden后，该元素会创建独立的块级格式化上下文（BFC），所有超出该容器边界的子元素内容都会被裁剪，而你的*mega menu（超级菜单）*是该ul的子元素，展开后高度超出ul容器的部分会被直接隐藏，所以看起来无法正常打开。

可行解决方案 #

方案1：调整DOM结构（最推荐，无兼容性问题）

将mega菜单从横向滚动的ul容器中移出，放到和导航容器同级的DOM节点下，再通过绝对定位控制mega菜单的展示位置，不受滚动容器的overflow属性限制。
结构参考：

<!-- 横向滚动导航容器 -->
<div class="nav-scroll-wrapper">
  <ul>
    <li class="nav-item">导航项1</li>
    <li class="nav-item">导航项2</li>
    <!-- 不要把mega menu放在ul里面 -->
  </ul>
</div>
<!-- mega menu和导航容器同级 -->
<div class="mega-menu" id="megaMenu">
  超级菜单内容
</div>

对应的导航容器CSS保持你原来的滚动逻辑即可，mega菜单的显隐通过JS绑定导航项的点击/hover事件控制。

方案2：动态修改overflow属性（无需改DOM）

当有导航项被激活（点击展开mega菜单）时，临时修改滚动容器的overflow属性，关闭裁剪，菜单收起后再恢复原有属性。
可以通过CSS :has 选择器实现（现代浏览器支持率95%+）：

/* 原有滚动样式保持不变 */
ul{ 
  white-space: nowrap;
  overflow-x: auto; 
  overflow-y: hidden;
  flex-wrap: inherit !important;
  scrollbar-width: none;
  position: relative;
}
ul::-webkit-scrollbar { 
  display: none; 
}
/* 当ul下有激活的导航项时，放开y轴溢出限制 */
ul:has(.nav-item.active) {
  overflow-y: visible;
}

如果需要兼容旧版浏览器，可以用JS实现：

const navItems = document.querySelectorAll('.nav-item')
const navUl = document.querySelector('ul')
navItems.forEach(item => {
  item.addEventListener('click', () => {
    // 切换激活状态
    const isActive = item.classList.contains('active')
    navItems.forEach(i => i.classList.remove('active'))
    item.classList.toggle('active', !isActive)
    // 修改ul的overflow属性
    navUl.style.overflowY = isActive ? 'hidden' : 'visible'
  })
})

方案3：mega菜单固定定位

给mega菜单设置position: fixed，直接相对于视口定位，完全脱离滚动容器的文档流，不会被overflow属性裁剪，只需要通过JS计算导航栏的高度，设置mega菜单的top值避免错位即可。

.mega-menu {
  position: fixed;
  top: 60px; /* 替换为你的导航栏实际高度 */
  left: 0;
  width: 100vw;
  z-index: 999;
}

内容的提问来源于stack exchange，提问作者fasih ur rehman