CSS：具有垂直子列表的垂直列表

Question

是否有人能够推荐对我的HTML / CSS进行更改，以便将较低的列表项向下推，而不是将子菜单置于其上的当前行为？

我的JsFiddle：http://jsfiddle.net/Arq2j/

CSS：

#navcontainer ul { list-style-type: none; }

.nested
 {
     display: none;
     list-style: none;
}
ul li{
    position: relative;
}
li:hover > .nested
 {
    display: block;
    position: absolute;
    left: 210px;
    top: 0;
}​

Answer 1

两个变化：

删除主ul上的高度：

ul {
 font-family:Georgia, Helvetica, Arial;
 font-size:20px;
 /* height:36px; */
 list-style:none;
 margin:0;
 padding:0;
 position:relative;
 width:20%;
}

删除子ul上的绝对定位：

ul li:hover ul {
 display:block;
 height:auto;
 /* left:0;
 position:absolute;
 top:36px; */
}

有关工作示例，请参阅http://jsfiddle.net/designingsean/Arq2j/2/。