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到 parent li，如下所示，也给 child 一些偏移量ul：

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