javascript - JQuery下拉：定位子菜单

Question

我有一个水平菜单和传统的垂直子<ul>菜单<ul>。

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

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

这很好用，但有一件事：所有子菜单都在主菜单的最左边淡入淡出，这样它们就不会与各自的 parent 内联<li>。

我相信这可能与使用position: absolute;.

有谁知道可能修改我的 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);
  });

演示小提琴