CSS 忽略溢出:隐藏 [英] CSS ignore overflow: hidden

问题描述

我正在为本网站 进行导航，但遇到了问题使用下拉导航.

I'm working on the navigation for this website and am having trouble with the dropdown nav.

基本上，我将 overflow: hidden 应用于保存导航项的容器，以便翻转效果正常工作(导航项的底部被屏蔽"关闭)；如果您在网站上滚动导航，您就会明白我的意思.

Basically, I have overflow: hidden applied to the container that holds the navigation items so that the rollover effect works properly (the bottom of the nav item is 'masked' off); you'll see what I mean if you roll over the nav on the website.

对于产品，有一个下拉导航.作为内置于 Business Catalyst (CMS) 的站点，我无法控制导航项的嵌套方式，但我显然可以使用 JQuery 设置它们的样式/定位它们.

For Products there is a dropdown nav. As the site in built in Business Catalyst (CMS), I don't have control over how the navigation items are nested, but I can obviously style them / target them with JQuery.

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

Is there a way to make the dropdown container within div#navigation ignore the overflow: hidden rule I have applied? I have tried setting position to absolute and playing with the z-index, but no luck.

也欢迎任何实现相同结果的建议.

Any suggestions to achieve the same result are also welcome.

推荐答案

overflow: hidden 不能被后代元素覆盖 - 它们将始终被具有 overflow 的元素裁剪:隐藏.

overflow: hidden can't be overridden by descendent elements - they will always be clipped by the element with overflow: hidden.

这篇关于CSS 忽略溢出:隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！