Drop-down menu won't behave

Here is the link to the fiddle : http://jsfiddle.net/UL2LB/1/

As you can see, I only have specified z-indexes on the hidden sub-list and the nav element, both of which have explicit positioning. So my question is, why the hell is my sub-menu still showing on top of the <nav>?

Thank you in advance for any answer.

Give your ul a pixel width and add position:relative to it the li.

nav.global ul li ul {
    width:180px;
    ...
}

nav.global > ul > li {
    display: inline-block;
    margin-left: 2%;
    position: relative;
}