CSS中带有垂直溢出的水平滚动

Question

我希望在页面顶部有一个导航菜单，显示菜单项，悬停时显示子菜单项，并允许使用滚动条进行水平溢出。该解决方案必须不需要 JavaScript。

如果我没有水平溢出，我可以让下拉菜单正常工作。

我也可以按照我想要的方式进行水平工作。

但后来我失去了垂直溢出，所以我根本看不到我的下拉菜单。

菜单只需要是最初可见的菜单项的高度，显然在示例中按钮需要是可点击的。

我认为问题在于将 overflow-x 设置为 auto 会创建一个新的块格式化上下文，因此 overflow-y 不能是 visible 并且我的溢出被隐藏了。

有什么方法可以同时实现水平滚动和垂直溢出？

.menu-items--depth-0 {
  /* These three give me the horizontal scroll I want, but then the drop-downs don't show */
  width: 300px;
  overflow-x: auto;
  overflow-y: hidden;

  white-space: nowrap;
  position: relative;
  z-index: 0;
}

.menu-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-item--depth-0 {
  display: inline-block;
}

.menu-item {
  position: relative;
  border: 1px solid grey;
  height: 30px;
  background: white;
}

.menu-items--depth-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  opacity: 0;
  pointer-events: none;
  transition: 300ms;
  z-index: 1;
}

.menu-item--depth-0:hover .menu-items--depth-1 {
  pointer-events: all;
  opacity: 1;
  transform: translateY(30px);
}

<ul class="menu-items menu-items--depth-0">
    <li class="menu-item menu-item--depth-0">
      Menu item one
      <ul class="menu-items menu-items--depth-1">
        <li class="menu-item menu-item--depth-1">Menu item one - one</li>
        <li class="menu-item menu-item--depth-1">Menu item one - two</li>
        <li class="menu-item menu-item--depth-1">Menu item one - three</li>
        <li class="menu-item menu-item--depth-1">Menu item one - four</li>
      </ul>
    </li>

    <li class="menu-item menu-item--depth-0">
      Menu item two
      <ul class="menu-items menu-items--depth-1">
        <li class="menu-item menu-item--depth-1">Menu item two - one</li>
        <li class="menu-item menu-item--depth-1">Menu item two - two</li>
        <li class="menu-item menu-item--depth-1">Menu item two - three</li>
        <li class="menu-item menu-item--depth-1">Menu item two - four</li>
      </ul>
    </li>

    <li class="menu-item menu-item--depth-0">Menu item three</li>

    <li class="menu-item menu-item--depth-0">
      Menu item four
      <ul class="menu-items menu-items--depth-1">
        <li class="menu-item menu-item--depth-1">Menu item four - one</li>
        <li class="menu-item menu-item--depth-1">Menu item four - two</li>
        <li class="menu-item menu-item--depth-1">Menu item four - three</li>
        <li class="menu-item menu-item--depth-1">Menu item four - four</li>
      </ul>
    </li>
  </ul>
  <div>
    <button>Some clickable thing</button>
  </div>

Answer 1

.menu-items--depth-0 {
  /* These three give me the horizontal scroll I want, but then the drop-downs don't show */
  width: 300px;
  overflow-x: auto;

  /** You do not require overflow-y **/
  /* For the sub menus to be displayed, you need to have some height to the element or create some div element below the ul element. So that you can see the sub menus over the div element. */
  
  height: 200px;

  white-space: nowrap;
  position: relative;
  z-index: 0;
}

.menu-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-item--depth-0 {
  display: inline-block;
}

.menu-item {
  position: relative;
  border: 1px solid grey;
  height: 30px;
  background: white;
}

.menu-items--depth-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  opacity: 0;
  pointer-events: none;
  transition: 300ms;
  z-index: 1;
}

.menu-item--depth-0:hover .menu-items--depth-1 {
  pointer-events: all;
  opacity: 1;
  transform: translateY(30px);
}

<ul class="menu-items menu-items--depth-0">
    <li class="menu-item menu-item--depth-0">
      Menu item one
      <ul class="menu-items menu-items--depth-1">
        <li class="menu-item menu-item--depth-1">Menu item one - one</li>
        <li class="menu-item menu-item--depth-1">Menu item one - two</li>
        <li class="menu-item menu-item--depth-1">Menu item one - three</li>
        <li class="menu-item menu-item--depth-1">Menu item one - four</li>
      </ul>
    </li>

    <li class="menu-item menu-item--depth-0">
      Menu item two
      <ul class="menu-items menu-items--depth-1">
        <li class="menu-item menu-item--depth-1">Menu item two - one</li>
        <li class="menu-item menu-item--depth-1">Menu item two - two</li>
        <li class="menu-item menu-item--depth-1">Menu item two - three</li>
        <li class="menu-item menu-item--depth-1">Menu item two - four</li>
      </ul>
    </li>

    <li class="menu-item menu-item--depth-0">Menu item three</li>

    <li class="menu-item menu-item--depth-0">
      Menu item four
      <ul class="menu-items menu-items--depth-1">
        <li class="menu-item menu-item--depth-1">Menu item four - one</li>
        <li class="menu-item menu-item--depth-1">Menu item four - two</li>
        <li class="menu-item menu-item--depth-1">Menu item four - three</li>
        <li class="menu-item menu-item--depth-1">Menu item four - four</li>
      </ul>
    </li>
  </ul>
  <div>
    <button>Some clickable thing</button>
  </div>

Answer 2

你可以尝试如下，我使用ul li标签而不是使用classes，它已被多次分配给ul和li's，head ul 在这里作为父元素工作width:300px，这就是为什么它在 x 轴上有滚动条，其他下拉菜单可以正常工作，因为不需要在此处将 position:relative 添加到父标签，希望这有效。

ul{
  padding:0;
  background:#ccc;
  width:300px;
  overflow-x:scroll;
  white-space:nowrap;
}
ul > li{
  list-style:none;
  display:inline-block;
  border: 1px solid grey;
  height: 30px;
  background: white;
}
ul > li > ul{
  display:block;
  position:absolute;
  white-space:initial;
  overflow:hidden;
  width:155px;
  display:none;
}
ul > li:hover > ul{
  display:block;
}
ul > li:nth-child(4) > ul{
  margin-left:-122px;
}
ul > li > ul > li{
  width:100%;
}

<ul class="menu-items menu-items--depth-0">
    <li class="menu-item menu-item--depth-0">
      Menu item one
      <ul class="menu-items menu-items--depth-1">
        <li class="menu-item menu-item--depth-1">Menu item one - one</li>
        <li class="menu-item menu-item--depth-1">Menu item one - two</li>
        <li class="menu-item menu-item--depth-1">Menu item one - three</li>
        <li class="menu-item menu-item--depth-1">Menu item one - four</li>
      </ul>
    </li>

    <li class="menu-item menu-item--depth-0">
      Menu item two
      <ul class="menu-items menu-items--depth-1">
        <li class="menu-item menu-item--depth-1">Menu item two - one</li>
        <li class="menu-item menu-item--depth-1">Menu item two - two</li>
        <li class="menu-item menu-item--depth-1">Menu item two - three</li>
        <li class="menu-item menu-item--depth-1">Menu item two - four</li>
      </ul>
    </li>

    <li class="menu-item menu-item--depth-0">Menu item three</li>

    <li class="menu-item menu-item--depth-0">
      Menu item four
      <ul class="menu-items menu-items--depth-1">
        <li class="menu-item menu-item--depth-1">Menu item four - one</li>
        <li class="menu-item menu-item--depth-1">Menu item four - two</li>
        <li class="menu-item menu-item--depth-1">Menu item four - three</li>
        <li class="menu-item menu-item--depth-1">Menu item four - four</li>
      </ul>
    </li>
  </ul>
  <div>
    <button>Some clickable thing</button>
  </div>

Answer 3

超出容器菜单的必须设置位置：固定 其他情况，需要用到JS