求助：HTML/CSS实现菜单与子菜单垂直滚动时子菜单隐藏问题

问题根源 #

你的问题出在溢出裁剪规则和不合理的HTML结构上：

1. 你在子菜单内部嵌套了div作为滚动容器，而这个div设置了overflow-x: clip，会裁剪所有超出其边界的内容——包括二级子菜单（它相对于一级菜单项定位，超出了div的水平范围）。
2. 当元素设置overflow（非visible值）时，会创建裁剪区域，哪怕子元素是绝对定位，只要它的包含块在这个裁剪区域内，就会被隐藏。

修复方案 #

第一步：修正HTML语义结构

移除所有ul内部的div（ul的直接子元素必须是li，这是HTML语义化的基本要求，多余的嵌套会引发布局冲突）：

<nav>
  <ul>
    <li><a href="#">Menu Item 1</a>
      <ul>
        <li><a href="#">Submenu Item 1.1</a></li>
        <li><a href="#">Submenu Item 1.2</a>
          <ul>
            <li><a href="#">Submenu Item 2.1</a></li>
            <li><a href="#">Submenu Item 2.2</a></li>
            <li><a href="#">Submenu Item 2.3</a></li>
            <li><a href="#">Submenu Item 2.5</a></li>
            <li><a href="#">Submenu Item 2.6</a></li>
          </ul>
        </li>
        <li><a href="#">Submenu Item 1.3</a></li>
        <li><a href="#">Submenu Item 1.4</a></li>
        <li><a href="#">Submenu Item 1.5</a></li>
        <li><a href="#">Submenu Item 1.6</a></li>
        <li><a href="#">Submenu Item 1.7</a></li>
      </ul>
    </li>
    <li><a href="#">Menu Item 2</a></li>
  </ul>
</nav>

第二步：调整CSS规则

把滚动属性直接应用到子菜单的ul上，同时避免设置水平方向的溢出裁剪：

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  float: left;
  position: relative;
}

nav ul li a {
  display: block;
  padding: 10px;
  color: #333;
  text-decoration: none;
}

nav ul li:hover > ul {
  display: block;
}

/* 一级子菜单：设置垂直滚动，保留水平溢出可见 */
nav ul ul {
  display: none;
  position: absolute;
  background-color: #fff;
  border: 3px solid #ccc;
  max-height: 100px;
  overflow-y: scroll;
  overscroll-behavior: contain;
  min-width: 160px;
  /* 不设置overflow-x，保持默认visible，允许二级子菜单超出显示 */
}

nav ul ul li:hover > ul {
  display: block;
}

/* 二级子菜单：独立设置垂直滚动，位置用百分比适配 */
nav ul ul ul {
  display: none;
  position: absolute;
  left: 100%; /* 用100%代替固定值，适配菜单宽度变化 */
  top: 0;
  width: 160px;
  max-height: 100px;
  overflow-y: scroll;
  overscroll-behavior: contain;
}

关键修改点说明 #

1. 移除冗余div：让菜单结构符合HTML规范，避免嵌套容器带来的裁剪冲突。
2. 滚动容器上移：把滚动属性直接绑定到子菜单ul，而非内部嵌套元素，这样一级子菜单的水平方向不会裁剪外部的二级子菜单。
3. 灵活定位：二级子菜单用left: 100%代替固定像素值，适配菜单宽度变化，避免位置偏移。

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