设置overflow属性导致嵌套sidenav被隐藏的问题如何解决？

问题根因 #

这是CSS的固有规则导致的：当元素的overflow-y属性设置为非visible的值（scroll/auto/hidden）时，无论你显式设置overflow-x为多少，浏览器都会自动将overflow-x计算为auto，你设置的overflow-x: visible实际不生效，超出容器横向范围的嵌套子菜单自然会被裁剪隐藏。

修复方案 #

方案1：拆分容器（推荐，无需JS适配）

将原菜单的滚动能力和菜单本身拆分为两层容器，外层单独处理垂直滚动，内层菜单不设置overflow属性，保证子菜单可以正常溢出横向范围：

1. 调整HTML结构，新增滚动包裹层：

<div class="menu-scroll-wrapper">
  <ul class="nestedsidemenu">
    <!-- 原有全部菜单项内容 -->
  </ul>
</div>

2. 调整CSS规则：

/* 外层滚动容器，接管原有ul的尺寸、定位属性 */
.menu-scroll-wrapper {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh; /* 你的侧边栏实际高度 */
  width: 200px; /* 你的侧边栏实际宽度 */
  position: relative;
}

/* 调整原顶级菜单样式，移除overflow配置 */
.nestedsidemenu ul {
  z-index: 100;
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;
  width: 100%;
}

/* 嵌套子菜单保留原有定位逻辑，设置left为侧边栏宽度即可正常展示在侧边栏右侧 */
.nestedsidemenu li .submenu {
  position: absolute;
  left: 100%;
  top: 0;
  z-index: 101;
  /* 其余原有子菜单样式保留 */
}

方案2：fixed定位子菜单（适合无法修改HTML结构的场景）

将嵌套子菜单的定位方式改为position: fixed，通过JS动态计算触发菜单的视口坐标，设置子菜单的top和left值，fixed定位不受父级overflow属性的限制，不会被裁剪。

方案3：临时修改overflow属性（不推荐）

在用户hover有子菜单的菜单项时，临时将顶级菜单的overflow-y设为visible，hover结束后恢复为auto，该方案会导致hover时侧边栏滚动条消失，体验较差，仅适合临时调试使用。

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