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

Answer 1

For those of you who didnt find the solution to you problem in the answers already given, you can try and do what i did, wich is to give your "nav-bar" a different "ID" than the rest of the "containers"..........wich after 2h46min of trying everything.....i said why not and it worked, you never know it might be as simple as that

Answer 2

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 3

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

Answer 4

try to put position:fixed on dropdown content.

.dropdown-content{
   position:fixed
}

Answer 5

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 6

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.