javascript - 相対的な親メニューの下にサブメニューを配置する

Question

横のリストにメニューがあり、下に縦のサブメニューがあります。<ul>親がホバーされたときに子を表示する単純な JQuery スクリプトがあります。

$('#menulist li').hover(
function() {
  $(this).children('ul').stop().fadeIn(200);
},
function () {
    $(this).children('ul').stop().fadeOut(200);
  }
);

私の問題は、子ulがそれぞれの親リスト項目の下に配置されていないことです。

各子ULのマージンレフトをハードコーディングする以外に、これを回避する方法を知っている人はいますか?

ここでの問題の再現: http://jsfiddle.net/MeltingDog/S8smw/5/

CSS:

#menulist ul li {
  display: inline;
  list-style-type: none;
  padding-right: 10px; 
}

#menulist ul li ul{
    display:none;
    background-color:#FFF;
    padding: 10px;
    position: absolute;
    z-index: 100;
}

Answer 1

position:relative次のように親に追加しli、子にもオフセットを与えますul。

#menulist ul li {position:relative;}
#menulist ul li ul{top:30px;left:0;}