Question

Ok so I’m trying to create a vertical sliding and I got one to almost work the way I want. It’s a really simple code. There’s 3 problems though:

• I need the sub menus to be closed when the page first loads
• If you quickly hover over the links the sub menus will start sliding like crazy. I need it to be more fluid and keep opening and closing. Its too sensitive
• If you hover anywhere on the screen ALIGNED to the links that slide down it’ll slide. I need it to slide only when you mouse over the link it self

Here’s the code: THANKS!

<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

• To make the submenus closed, either set the CSS for them to display:none; or do $("li ul").hide(); inside of the .ready() function before you define the hover bit.
• This is an unfortunate side-effect of this style of hover menus. There’s a jQuery plugin called HoverIntent that I’ve used before to help this, but in the end I ended up not doing any animation as it’s just too tricky to pull off in a nice way.
• It sounds like the li elements span a much larger portion of the page than is visible. You may want to check out your CSS for them and limit the height or width of them. So long as overflow:hidden isn’t set, the submenus should still appear.