javascript - jQuery.animate() 函数上的菜单 "ul"与子菜单 "ul"元素重叠

Question

我希望我的子菜单有向下滑动的效果

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

我希望我的子菜单具有以下效果:汽车(子菜单)离开车库(一级菜单)向下滑动，然后 parking 到车库，向上滑动。我不想有 $.slideDown() 或 $.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 的第一级)需要用具有正 z-index 的元素包装(主要 ul)并且子级(内部 ul)需要具有负 z-索引(你有那个)。

编辑:根据 Shukhrat Raimov 的建议我正在添加他的 jsFiddle与工作代码。