Why are all of the list items in my nested list navigation displayed directly on top of each other?

Question

Nested list navigation is not displaying the second list as I'd expect (block listed down vertically). Instead all items are placed directly on top of one another.

http://jsfiddle.net/HL69H/3/

<div id="linksLeft">
        <ul class="menu">
            <li class="current"><a href="">about</a></li>
            <li class="current" id="active"><a href="">portfolio</a>
                <ul class="subMenu" id="subNav">
                    <li><a href="">editorial</a></li>
                    <li><a href="">advertising</a></li>
                    <li><a href="">packaging</a></li>
                    <li><a href="">photography</a></li>    
                </ul>
            </li>
        </ul>
    </div>


#nav {
width:48em;
margin:auto;
text-align:center;
padding-top:6em;
list-style-type:none;
}

#outerBox {
margin:0;
padding:0;
}

#linksLeft{
float:left;
border-top:2px solid #93b9bb;
border-bottom:2px solid #93b9bb;
margin-top:60px;
padding:5px 0px;
}

#linksLeft li {
display:inline-block;
padding:0 3em;
position:relative;
}
#linksLeft li ul li {
display:block;
}

#subNav li{
position:absolute;
padding:1em;
left:50%;
/*display:none;*/
}

#linksRight li{
display:inline-block;
padding:0 3em;
position:relative;
}

Answer 1

The position: absolute; was stacking them. Changing this to relative, and use absolute positioning on the parent container to position it where you want it.

#subNav li{
    position:relative;
    padding:1em;
    left:50%;
    /*display:none;*/
}