Html 当菜单具有垂直滚动条时，在菜单项外显示子菜单

我正在尝试创建一个菜单，它将位于2列布局的左侧。 菜单被定位为固定的，并且具有特定的高度，以便通过垂直滚动条可以看到溢出的菜单项

但是我正在努力使用一个没有任何javascript的纯css解决方案从菜单项中弹出子菜单项

我试过的是：

子菜单内容仍保留在滚动条内的leftnavigation div中

---

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

问题是您希望在相同的元素中使用

overflow-y:auto

和

overflow-x:visible

，这两个元素不可能一起使用（

overflow-x

变成

auto

）

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

变化：

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

• 修改CSS并添加：
  .物品容器{ 溢出y：自动； 身高：100%； }

---

希望有帮助

你能更新JSFIDLE链接吗。它显示了css规范。我试过你的。它很酷。非常感谢你的时间和努力。我对此感激不尽。我刚刚用建议的解决方案更新了我的JSFIDLE@Nataraj我错了，我已经更新了JSFIDLE链接，感谢您指出这一点！

.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;
}