Question

我在下面的水平列表和垂直子菜单中有一个菜单。我有一个简单的JQuery脚本，当父母盘旋时显示孩子<ul>：

$('#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;}

将子菜单放在相对父菜单下

1 个答案: