设置菜单overflow-y:scroll后子菜单被隐藏，如何实现Y轴滚动且X轴可见？

问题出在CSS的规范限制上：当你给元素同时设置overflow-y: scroll和overflow-x: visible时，浏览器会自动将overflow-x强制转换为auto（或hidden），这就导致横向的子菜单被容器裁切隐藏了。

最可靠的解决方案：添加外层滚动容器 #

通过给原.sub-menu套一层容器，把垂直滚动的逻辑放在外层，让内层的子菜单可以自由横向溢出：

1. 调整HTML结构（给子菜单加外层容器）：

<ul class="main-header-menu ast-menu-shadow">
  <li class="menu-item">
    <a href="#">主菜单</a>
    <div class="sub-menu-scroll-wrapper">
      <ul class="sub-menu">
        <!-- 原有的子菜单项及嵌套子菜单 -->
        <li class="menu-item has-children">
          <a href="#">带嵌套的子菜单</a>
          <ul class="sub-menu">
            <li><a href="#">嵌套菜单选项</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </li>
</ul>

2. 修改CSS样式：

/* 外层容器负责垂直滚动 */
.ast-desktop .main-header-menu.ast-menu-shadow .sub-menu-scroll-wrapper {
  max-height: 315px;
  overflow-y: scroll;
}

/* 内层子菜单保持横向内容可见 */
.ast-desktop .main-header-menu.ast-menu-shadow .sub-menu {
  overflow-x: visible;
  /* 移除原来的max-height和overflow-y属性 */
}

无HTML修改的替代方案（不推荐） #

如果无法调整HTML结构，可以给嵌套的子菜单设置position: absolute，脱离父容器的裁切范围，但需要手动计算定位坐标，适配不同屏幕尺寸时容易出问题：

.ast-desktop .main-header-menu.ast-menu-shadow .sub-menu .sub-menu {
  position: absolute;
  left: 100%;
  top: 0;
}

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