如何为子菜单添加仅垂直滚动（解决嵌套子菜单失效问题）

核心问题是你给一级子菜单设置overflow-x: hidden后，嵌套子菜单因绝对定位超出父元素范围，被该属性裁切隐藏了。而且浏览器不允许单独设置overflow-y: auto+overflow-x: visible（会强制把overflow-x改成auto/scroll），所以得换方式实现垂直滚动：

方案1：给一级子菜单加内部滚动容器（推荐） #

调整HTML结构 #

把一级子菜单的所有菜单项套进一个容器里：

<ul class="sub-menu">
  <div class="sub-menu-inner">
    <li>服务项目
      <ul class="sub-menu">
        <li>美甲</li>
        <li>美睫</li>
      </ul>
    </li>
    <!-- 其他一级子菜单项 -->
  </div>
</ul>

对应CSS设置 #

/* 一级子菜单本身允许内容超出显示 */
.sub-menu {
  position: relative;
  overflow: visible;
  /* 保留你原来的宽度、定位等样式 */
}

/* 内部容器负责垂直滚动 */
.sub-menu-inner {
  max-height: 350px; /* 根据需求设置最大高度 */
  overflow-y: auto;
  overflow-x: hidden; /* 这里隐藏水平溢出，不会影响嵌套菜单 */
}

/* 确保嵌套子菜单定位正确 */
.sub-menu .sub-menu {
  position: absolute;
  left: 100%; /* 从父菜单右侧弹出 */
  top: 0;
  /* 保留你原来的样式 */
}

方案2：用clip-path替代overflow-x:hidden（适合不想改HTML的情况） #

如果不想调整HTML结构，可以去掉overflow-x: hidden，用clip-path裁切水平溢出，同时允许嵌套菜单超出显示：

.sub-menu {
  max-height: 350px;
  overflow-y: auto;
  /* 替换overflow-x: hidden */
  clip-path: inset(0 0 0 0);
}

注：clip-path兼容所有现代浏览器，仅旧版IE不支持，不需要兼容IE的话可以用这个方法。

最后记得检查嵌套子菜单的z-index，避免被其他元素遮挡。

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