html - 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

2 つの変更:

メイン 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/を参照してください。