当菜单具有垂直滚动条时显示菜单项之外的子菜单

Question

我正在尝试创建一个菜单，该菜单位于2列布局的左侧。 菜单的位置固定，并且具有特定的高度，以便可以使用垂直滚动条看到那些溢出的菜单项。

但是我正在努力使用纯CSS解决方案从子菜单项中弹出子菜单项。

我尝试过的是这里

http://jsfiddle.net/nataraj_gnanavadivel/npwro63c/

.left-navigation {
  position: fixed;
  height: 86%;
  background: rgba(254, 228, 194, 0.3);
  width: 24%;
  border-radius: 10px;
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
}

.menu-item {
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.3);
  color: white;
  border-radius: 10px;
  margin: 2px;
  position: static;
  display: inline-block;
}

.sub-menu-dropdown {
  position: absolute;
  border: solid red 1px;
  width: 250px;
  display: block;
  margin-left: 80px;
}

子菜单内容仍停留在滚动条内的左侧导航div中。

它应该从那个容器中出来，并显示在菜单项上。

Answer 1

问题是您想在同一元素中使用overflow-y: auto和overflow-x: visible，而不能同时使用according to the specs（overflow-x变成{{1} }。

您需要做的是将行为分为两个元素，第一个将显示滚动条，第二个将显示溢出的元素。

See this working approach in JsFiddle

更改：

• 我修改了您的HTML，并在导航和项目之间添加了auto。

• 修改了CSS并添加了：

  .items-container {   溢出-y：自动;   高度：100％; }

希望有帮助！