Вертикальное раздвижное меню Бар

Question

Хорошо, поэтому я пытаюсь создать вертикальное скольжение, и у меня есть тот, который почти работает так, как я хочу. Это действительно простой код. Там в 3 проблемы, хотя:

• мне нужно в подменю, которые будут закрыты, когда первой загрузке страницы
• Если вы быстро наведите курсор мыши на ссылки в подменю начнется скольжение, как сумасшедший. Мне нужно, чтобы он был более жидким и продолжал открываться и закрываться. Его слишком чувствительный
• Если вы наведете указатель мыши на любом месте экрана, прикрепленного к ссылкам, которые скользят вниз, он будет скользить. Мне нужно, чтобы он скользил, только когда вы наводили указатель мыши на ссылку.

Вот код: СПАСИБО!

<script type='text/javascript'> 
$(document).ready(function(){ 
$("nav.main_menu li").hover(function(){ 
    $(this).children("ul").slideDown(500); 
},function(){ 
$(this).children("ul").slideUp(300);  
}); 
}); 
</script> 


<nav class="main_menu"> 
<ul> 
<li><a href="#">Home</a></li> 
<li><a href="#">News</a> 
<ul class="sub-menu"> 
<li><a href="#">Events</a></li> 
<li><a href="#">Updates</a></li> 
</ul> 
</li> 
<li><a href="#">People</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Gallery</a> 
<ul class="sub-menu"> 
<li><a href="#">2009</a></li> 
<li><a href="#">2010</a></li> 
<li><a href="#">2011</a></li> 
<li><a href="#">2012</a></li> 
<li><a href="#">2013</a></li> 
<li><a href="#">2014</a></li> 
<li><a href="#">2015</a></li> 
</ul> 
</li> 
<li><a href="#">Contact</a></li> 
<li><a href="#">Bio</a></li> 

       </ul> 
      </nav> 

Answer 1

• Для того, чтобы подменю закрыты, либо установить CSS для них display:none; или сделать $("li ul").hide(); внутри функции .ready(), прежде чем определить бит парения.
• Это неудачный побочный эффект этого стиля наведения. Там есть плагин jQuery под названием HoverIntent, который я использовал раньше, чтобы помочь этому, но в конце концов я не делал анимации, потому что это слишком сложно сделать красиво.
• Похоже, что элементы li охватывают гораздо большую часть страницы, чем видно. Вы можете проверить свой CSS для них и ограничить их высоту или ширину. Пока overflow:hidden не установлен, подменю все равно должны появиться.