由于溢出，即使绝对定位，CSS下拉菜单也不会显示：隐藏答案

【问题标题】：CSS Dropdown menu isn't shown even though absolutely positioned because of overflow: hidden由于溢出，即使绝对定位，CSS下拉菜单也不会显示：隐藏
【发布时间】：2014-10-11 22:04:54
【问题描述】：

我试图在悬停时显示一个下拉菜单，但我还必须对父元素应用溢出：隐藏。结果是我的下拉列表，即使绝对定位，也不可见（因为溢出：隐藏）。

我在那里重现了问题：http://plnkr.co/edit/2rbaISwvzuKhyPEFpBKD?p=preview（您可以点击编辑/代码编辑查看完整的源代码）

（小样本）

#block-paddle-menu-display-first-level .menu_wrapper.level-2 {
  position: absolute;
  visibility: hidden;
}
#block-paddle-menu-display-first-level .has-children:hover .menu_wrapper.level-2 {
  visibility: visible;
  padding: 15px 0;
  background: black;
  width: 300px;
}

在“Hover Here -...”列表项下，有一个嵌套的 ul，应该在悬停时显示..

要求

溢出：隐藏在父级上是箭头/滑动效果工作所必需的（它在测试用例上不能完美工作，但现在忽略它）
我们需要菜单背景颜色在整个页面上展开

【问题讨论】：

你想溢出：隐藏在列表项上吗？
@"close"rs - 解释原因
@RahulSambari 我希望我的下拉菜单正常工作。
我可以在悬停时看到数据..称为 ypsilon mu 等
embed.plnkr.co/2rbaISwvzuKhyPEFpBKD 刷新。我禁用了溢出：隐藏（正在进行中）

标签： html css drop-down-menu overflow

【解决方案1】：

block-paddle-menu-display-first-level{ overflow:visible;}

从 li 中删除 float 并添加 display:inline-block; 从那一点开始。

【讨论】：

这低于平均水平。你不能放弃一行 CSS 并说“从那一点开始工作”。详细说明，我会投赞成票。
我给你的答案解决了你问的问题。悬停在整个栏上出现故障的事实不在这个问题中。这是一种告诉您修复代码的礼貌方式。（是的，这两行代码将解决您的问题）
再次检查 plunk。与地球上所有其他下拉菜单一样，下拉菜单应绝对定位。很明显，你在我处理它的时候检查了错误的 plunk 版本。
不，您的回答并不能解决问题。我只是在 plunk 上试了一下。
好的...我刚刚做了...在萤火虫中修改了我刚才所说的，我可以看到下拉列表。（没有人说要删除绝对位置...）

【解决方案2】：

解决方案是移动内容容器内的导航栏 - 并将溢出：隐藏移动到 DOM 中更高的元素 - 这样我们确保高度足以显示下拉菜单，同时仍然隐藏内容溢出水平轴...

【讨论】：