Question

我想让我的子菜单使用

进行下滑效果

$.animate({top:$("#menu").outerHeight()})

我希望我的子菜单能够作为汽车（子菜单）的效果，离开车库（第一级菜单）向下滑动，然后停车到车库。我不想要$.slideDown() or $.slideUp()效果，因为我不喜欢增加身高的效果。

问题是我似乎无法让我的第一级菜单在滑动或向上滑动时重叠我的子菜单。在悬停子菜单上只是重叠主菜单，然后在向上滑动时保持“重叠”。

这是我的HTML代码：

<ul id="menu_Navigation2">
  <li>First</li>
  <li>Second
      <ul>
          <li>Default</li>
          <li>Default</li>
      </ul>
  </li>
  <li>Third</li>
  <li>Forth
      <ul>
          <li><a href="#">Forth default</a>
          </li>
          <li><a href="#">forth default</a>
          </li>
      </ul>
  </li>
</ul>

CSS：

#menu_Navigation {
    border:1px solid green;
    margin:0px;
    padding:0px;
    list-style-type:none;

}
#menu_Navigation li {
    padding:4px 4px;
}
#menu_Navigation>li {
    display:inline-block;
    position:relative;
    list-style-type:none;
    z-index:90;

    border:1px solid black;
    background:linear-gradient(to bottom, #b5c7e4, #94b1dc);
    color:white;
    font-size:13px;
    cursor:default;
    margin-right:-4px;
    min-width:100px;
}
#menu_Navigation a {
    color:white;
    text-decoration:none;
}

#menu_Navigation ul {
    position:absolute;
    display:none;
    padding:0px;
    min-width:106px;
    margin-left:-4.5px;
    list-style:none;
    top:-27px;
    z-index:-999;
}
#menu_Navigation ul li {
    display:block;
    border:1px solid black;
    background:linear-gradient(to bottom, #b5c7e4, #94b1dc);
}
#menu_Navigation ul li:hover {
    border:1px solid black;
    background:linear-gradient(to bottom, #b5c7e4, #94b1dc);
    color:blue;
}

为了澄清，请查看此jsFiddle，其中说明了问题。

如何实现此动画效果，以便子菜单从主菜单中逐渐显示（逐渐），然后正确滑动到菜单（不重叠）？提前感谢任何建议。

Answer 1

从：

中删除z-index

#menu_Navigation>li

并将其添加到：

#menu_Navigation

为了使这个工作（孩子上面的父母），父母（第一级别的li）需要被包裹（主要的ul），其元素具有正z-index，而子女（内部ul）需要具有负z-索引（你有）。

编辑：根据Shukhrat Raimov的建议，我将jsFiddle添加到工作代码中。

菜单“ul”与jQuery.animate（）函数上的子菜单“ul”元素重叠

1 个答案: