CSS忽略溢出：隐藏

Question

我正在处理 this website 的导航，并且我遇到了下拉导航功能的问题。

基本上，我将overflow: hidden应用于容纳导航项的容器，以便翻转效果正常工作（导航项的底部被'屏蔽'关闭）;如果你在网站上滚动导航，你会明白我的意思。

对于产品，有一个下拉导航栏。作为内置在Business Catalyst（CMS）中的站点，我无法控制导航项的嵌套方式，但我显然可以使用JQuery对它们进行样式化/定位。

有没有办法让div#navigation内的下拉容器忽略我应用的overflow: hidden规则？我尝试将position设置为absolute并使用z-index，但没有运气。

也欢迎任何达到相同结果的建议。

Answer 1

解决方案： 从包含position:relative;的框中删除overflow:hidden;规则，并将其设置为其中一个父框。然后，overflow:hidden;框中的绝对框将忽略此规则。 演示：http://jsfiddle.net/88fYK/5/

Answer 2

overflow: hidden不能被后代元素覆盖 - 它们将始终被overflow: hidden元素剪切。

Answer 3

设置元素的位置：fixed将从正常文档流中删除元素及其子元素，从而允许它被取消剪切。但是您必须相对于浏览器窗口手动重新定位它。不是一个很好的解决方案，但它是一种解决方法。

Answer 4

如果您的容器设置为“overflow：hidden;”并且您的下拉菜单位于此容器下，您只需设置“position：absolute;”

.container {
  overflow: hidden;
}

.your_dropdown_menu {
  position: absolute;
}

Answer 5

尝试放置位置：固定在下拉菜单内容上。

.dropdown-content{
   position:fixed
}

Answer 6

对于那些在已经给出的答案中没有找到解决您问题的方法的人，您可以尝试做我所做的事情，这是为您的“导航栏”提供一个不同于其余“ ID”的“ ID” “容器” ..........经过2h46min的尝试后，.....我说了为什么不行，它起作用了，你永远都不知道它可能会那么简单