侧边栏设置overflow-y后hover下拉菜单被隐藏的CSS问题求助

问题原因 #

你给.sidebar_nav-main设置overflow-y: auto和固定高度后，这个容器会生成块级格式化上下文（BFC），所有超出容器边界的内容都会被裁剪。你的下拉菜单是绝对定位且left:200px，超出了.sidebar_nav-main的宽度，因此被容器的overflow属性隐藏。

解决方案 #

方案一：调整滚动容器范围（推荐）

把滚动属性从.sidebar_nav-main移到它内部的内容列表上，让.sidebar_nav-main本身不设置overflow，下拉菜单就能不受裁剪限制：

.sidebar-left.open .sidebar_nav .sidebar_nav-main {
    padding: 0;
    margin: 0;
    list-style: none;
    /* 移除原有的overflow-y和height */
}

/* 假设内部列表类名为nav-list，根据实际结构调整 */
.sidebar-left.open .sidebar_nav .sidebar_nav-main .nav-list {
    overflow-y: auto;
    height: calc(100vh - 50px);
}

/* 下拉菜单样式保持不变 */
.sidebar-left.open .dropdown .sidebar-subchild-hover .dropdown-menu{
  position: absolute;
  display: none;
}

.sidebar-left.open .dropdown:hover .sidebar-subchild-hover .dropdown-menu{
  position: absolute;
  display: block;
  left: 200px;
}

方案二：修改容器的overflow水平方向（兼容性有限）

显式设置.sidebar_nav-main的overflow-x: visible，尝试让水平方向内容不被裁剪，但注意部分浏览器会因规范限制，将overflow-x: visible强制转为auto，这个方法不一定通用：

.sidebar-left.open .sidebar_nav .sidebar_nav-main {
    padding: 0;
    margin: 0;
    list-style: none;
    overflow-y: auto;
    overflow-x: visible;
    height: calc(100vh - 50px);
}

方案三：调整下拉菜单的定位参考

将下拉菜单的定位参考提升到侧边栏外层容器（比如.sidebar-left），让它脱离滚动容器的裁剪范围：

/* 给外层容器设置相对定位，作为下拉菜单的参考 */
.sidebar-left.open {
    position: relative;
}

.sidebar-left.open .dropdown .sidebar-subchild-hover .dropdown-menu{
  position: absolute;
  display: none;
  left: 100%; /* 相对于外层容器宽度，代替固定值200px更灵活 */
  top: 0;
}

.sidebar-left.open .dropdown:hover .sidebar-subchild-hover .dropdown-menu{
  display: block;
}

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