css - 垂直滑动菜单栏

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，子菜单仍应显示。