Меню «уль» перекрывает элемент подменю «уль» на jQuery.animate функции

Question

() Я хочу, чтобы мое подменю, чтобы скользить вниз эффект, используя

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

Я хочу, чтобы мое подменю, чтобы иметь эффект в виде автомобиля (подменю), оставляя гараж (меню первого уровня) при слайд вниз, затем автомобильную стоянку в гараж на слайде. Я не хочу иметь эффекты $.slideDown() or $.slideUp(), потому что мне не нравится эффект увеличения высоты.

Проблема в том, что я не могу заставить мое меню первого уровня перекрывать свое подменю при сползании или сползании вверх. В подменю hover просто перекрывается главное меню, а затем остается «наложенным» на слайд вверх.

Вот мой 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-индекс от:

#menu_Navigation>li 

И добавить его:

#menu_Navigation 

Для этой работы (родителя над детьми) родителя (первый уровень Li) должна быть (main ul) с элементом с положительным z-индексом, а дети (внутренняя ul) должны иметь отрицательный z-индекс (у вас есть).

EDIT: Как было предложено Shukhrat Raimov я добавляю Его jsFiddle с рабочим кодом.