CSS Dropdown menu cutoff by container in IE9

Question

I have a very similar problem to this post:

CSS Flyout menu gets cut off by borders of its container in IE9

The difference is that in my case I need to have the z-index (and therefore position) set on the container. You can see my JSFiddle here:

http://jsfiddle.net/qbaH9/4/

In the full layout there is an element that I "slide under" the header by adding z-index: 100 to the header, as you can see in this image .

How do I keep the z-index set on the header, and also make sure the dropdown isn't cutoff in IE9?

Answer 1

Remove position: relative from the .main-header .

http://jsfiddle.net/qbaH9/3/