CSS ignore overflow: hidden

Question

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

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.

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.

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.

Answer 1

Solution: Remove position:relative; rule from box with overflow:hidden; and set it to one of her parent boxes. Then absolute boxes in the box with overflow:hidden; will ignore this rule. Demo: http://jsfiddle.net/88fYK/5/

Answer 2

try to put position:fixed on dropdown content.

.dropdown-content{
   position:fixed
}

Answer 3

Setting the element's position:fixed will remove the element and its children from the normal document flow allowing it to be unclipped. But you'll have to manually reposition it relative to the browser window. Not a great solution but it is a work-around.

Answer 4

if your container is set to "overflow: hidden;" and your dropdown menu is under this container, you just need to set "position: absolute;"

.container {
  overflow: hidden;
}

.your_dropdown_menu {
  position: absolute;
}

Answer 5

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