Question

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

＆＃13;

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

＆＃13;

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

只需按照＆＃34;测试＆＃34;链接以查看结果。

正如您所看到的那样，滚动条出现在最后一个孩子（红色ul）上。但是当我添加overflow-y：auto或滚动到中间ul（蓝色）时打破红色ul的位置。

我尝试过设置z-index和！important对红色ul的位置但没有运气。

我的问题可以用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/

如何在嵌套的<ul>列表中为每个<ul>添加滚动条而不会破坏每个<ul>的位置

1 个答案: