html - 带有滚动条问题的多级下拉菜单

Question

因为我有一个很长的菜单列表，我想用滚动来限制它们。

在此codepen demo ，没有滚动也能正常工作。

但是如果我添加 overflow-y:scroll; height:200px;，它会导致 overflow-x 并隐藏所有下拉列表，如下图所示。

我找到了这个 smart menu完成这项工作的图书馆。

但我的问题是 - 如果没有图书馆，我怎么能做到这一点？

Answer 1

仅使用 CSS 可能是不可能的。

您真正需要的是 JavaScript。因为没有它，您只是将内部列表的可见性设置为 visibility: hidden 并且在生成 div 或页面。这就是x方向溢出的原因。

仅使用 CSS，您必须设置主列表的恒定宽度以容纳内部列表。

下面是我尝试使用固定宽度的 CSS。将它放在您要添加的 CSS 的位置。所以不是这个:

li.dropdown ul {
  overflow-y: scroll;
  height: 300px;
}

添加这个:

li.dropdown ul {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 300px;
  width: 450px;
}

li {
   width: 100px;
}