JQuery下拉：定位子菜单

Question

我有一个水平菜单和垂直子菜单，采用传统的<ul> 和<ul> 方式。

我创建了一个简单的 JQuery 代码，以便在父级 <li> 悬停时出现子菜单（第二个 <ul>）：

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

这很好用，但有一个原因：所有子菜单都在主菜单的最左侧淡入淡出，这样它们就不会与各自的父级 <li>s 内联。

我相信这可能与使用 position: absolute; 的子菜单的 CSS 有关。

有谁知道修改我的 jQuery 以使每个子菜单出现在其主菜单父级下方的方法？

谢谢！

编辑：添加 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

试试

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

DEMO Fiddle