css - 为什么我的嵌套列表导航中的所有列表项都直接显示在彼此之上？

Question

嵌套列表导航没有像我预期的那样显示第二个列表(垂直向下列出的 block )。相反，所有元素都直接放在另一个之上。

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

position: absolute; 正在堆叠它们。将其更改为相对，并在父容器上使用绝对定位将其定位到您想要的位置。

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