css - 为什么我的嵌套列表导航中的所有列表项都直接重叠显示？

Question

嵌套列表导航没有像我预期的那样显示第二个列表（垂直向下列出的块）。相反，所有项目都直接放在彼此的顶部。

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;*/
}

Answer 2

问题是你的'#subnav li'的CSS。您为 ul 而不是 li 应用的样式。

CSS

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

#menu li{
    position:relative;
}

这给了你你想要的