垂直滑动菜单栏

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()函数内部。
• 这是这种悬停菜单样式的不幸副作用。 我以前曾使用过一个名为HoverIntent的jQuery插件来帮助解决此问题，但最终我没有做任何动画，因为它太棘手了，无法以一种不错的方式实现。
• 听起来li元素在页面中所占的比例比可见的要大得多。 您可能想为它们签出CSS并限制它们的高度或宽度。 只要未设置“ overflow:hidden ，子菜单仍将出现。