title: Vertical Sliding Menu Bar
body: <p>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:</p>
  
  <ul>
  <li>I need the sub menus to be closed when the page first loads</li>
  <li>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</li>
  <li>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</li>
  </ul>
  
  <p>Here's the code: THANKS!</p>
  
  <pre><code>&lt;script type='text/javascript'&gt;
  $(document).ready(function(){
  $("nav.main_menu li").hover(function(){
      $(this).children("ul").slideDown(500);   
  },function(){
   $(this).children("ul").slideUp(300);      
  });
  });
  &lt;/script&gt;
  
  
  &lt;nav class="main_menu"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;News&lt;/a&gt;
  &lt;ul class="sub-menu"&gt;
  &lt;li&gt;&lt;a href="#"&gt;Events&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Updates&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;People&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Gallery&lt;/a&gt;
  &lt;ul class="sub-menu"&gt;
  &lt;li&gt;&lt;a href="#"&gt;2009&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;2010&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;2011&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;2012&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;2013&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;2014&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;2015&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Bio&lt;/a&gt;&lt;/li&gt;
  
                  &lt;/ul&gt;
              &lt;/nav&gt;
  </code></pre>