CSS ignore overflow: hidden

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;
}

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/

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

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.