Question

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

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

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

这样做很好，但有一点：所有子菜单都在主菜单的最左侧淡化，因此它们不与各自的父<li>内联。

我认为这可能与使用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

JQuery下拉：定位子菜单

1 个答案: