jquery - 如何在不破坏每个 位置的情况下向嵌套 列表中的每个 添加滚动条

Question

我有一个这样的嵌套 ul 列表:

<ul>
  <li>
    <a>Subcat</a>
    <ul class="subcat">
      <li>
        <a>Subcat2</a>
        <ul class="subcat2">
          <li></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

我试图让每个 ul 都有一个滚动条。经过多天的努力，这就是我所拥有的: https://jsfiddle.net/yaeqouem/3/

只需点击“此处测试”链接即可查看结果。

如您所见，滚动条出现在最后一个子项(红色 ul)上，它起作用了。但是当我添加 overflow-y:auto 或滚动到中间的 ul(蓝色的)时打破红色 ul 的位置。

我已经尝试在红色 ul 的位置上设置 z-index 和 !important 但没有成功。

我的问题可以用 css 解决吗？还是我必须使用 JavaScript 或其他东西

非常感谢任何帮助!

更新

This is what im trying to achive

Answer 1

添加 overflow:auto 到 subcat 类

//Child ul
.subcat {
  height: 100%;
  position: absolute !important;
  top: 0;
  left: 100%;
  width: 100%;
  border: 1px solid blue;
  margin-left: 10%;
  display: none;
  list-style: none;
  text-align: center;
  padding: 0;
  overflow:auto;

  //Does not work, hides red ul.
  //overflow-x: hidden;
  //overflow-y: auto;
 // z-index: 999;
}

请检查以下 js fiddle https://jsfiddle.net/yaeqouem/5/