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

问题描述

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

I am trying to show a dropdown menu on hover, but I also have to apply an overflow: hidden to the parent element. The result is my dropdown, even though absolutely positioned, isn't visible (because of the overflow: hidden).

我在这里重现了问题：（您可以点击编辑/代码编辑查看完整的源代码）

I reproduced the problem there: http://plnkr.co/edit/2rbaISwvzuKhyPEFpBKD?p=preview (you can hit Edit/Code edit to see the full source code)

（小样本）

#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 -...列表项目下，有一个

Under the "Hover Here -..." list-item, there's a nested ul which should be shown on hover..

要求

• 为了使箭头/滑动效果可以工作，需要在父项上隐藏的溢出（在测试用例上无效，但忽略现在）


• 我们需要菜单背景颜色在整个页面上展开

相关问题但不是100％完全相同：

Related Questions but not 100% identical: Is it possible to see content that goes outside a container's dimensions when the container is set to Overflow hidden?

推荐答案

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

The solution was to move the navigation bar inside the content container - and move the overflow: hidden to an element higher in the DOM - this way we ensure the height is enough for the dropdown to be shown, while still hiding the content that overflows the horizontal axis...

这篇关于即使绝对定位，由于溢出：隐藏，CSS下拉菜单也不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！