Dropdown menu appearing beneath content area

I have two relatively positioned areas on my page, the content and the header.

The content has a higher z-index than the header - this is a requirement for the structure of the page.

I've simplified the HTML and CSS to illustrate what I'm trying to do here: http://cb3.securetree.com/example.开发者_如何学编程html

This presents an issue with dropdown menus that exist in the header because they display underneath the content region even though their z-index is higher.

On the example page, notice how the dropdown menu goes beneath the content region.

Appreciate any assistance in solving this issue.

---

Relatively positioned elements will display on top of things that are not relatively positioned. You should avoid having to use relative positioning where it's not necessary. If you use floats and margins etc to move things around on the page, you shouldn't have any z-index issues.