title: Vertical Sliding Navigation Bar
body: <p>I have a vertical sliding menu but there's a few things I'm missing and not sure how to do.</p>
  
  <ul>
  <li>I want all the sub menu items to be closed when the page load/refreshes</li>
  <li>When the mouse hovers over a link with sub menus it slides down and goes back up when it hovers over another link with sub menus. I need it to slide back up every time the mouse stops hovering over the link(s)</li>
  </ul>
  
  <p>Here's the code and thanks</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"&gt;&lt;/script&gt;
  
  &lt;script type='text/javascript'&gt;
  var $ = jQuery.noConflict(); 
  $(document).ready(function(){  
  $("#secondpane li.menu-item").mouseover(function(){
  $(this).next("li.menu_body").slideDown(500).siblings("li.menu_body").slideUp("slow");
  });  
  });
  &lt;/script&gt;
  
  
  
  &lt;div class="menu-container"&gt;
  &lt;ul id="secondpane"&gt;
  &lt;li&gt;&lt;a href="#"&gt;home&lt;/a&gt;&lt;/li&gt;
  &lt;li class="menu-item"&gt;&lt;a href="#"&gt;about us&lt;/a&gt;&lt;/li&gt;
      &lt;li class="menu_body"&gt;&lt;ul&gt;
          &lt;li class="menu-item"&gt;&lt;a href="#"&gt;testimonials&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu-item"&gt;&lt;a href="#"&gt;full width page&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;&lt;/li&gt;
  &lt;li class="menu-item"&gt;&lt;a href="#"&gt;blog&lt;/a&gt;&lt;/li&gt;
      &lt;li class="menu_body"&gt;&lt;ul&gt;
          &lt;li class="menu-item"&gt;&lt;a href="#"&gt;web design&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu-item"&gt;&lt;a href="#"&gt;illustrations&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu-item"&gt;&lt;a href="#"&gt;art inspiration&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;&lt;/li&gt;
  &lt;li class="menu-item"&gt;&lt;a href="#"&gt;portfolio&lt;/a&gt;&lt;/li&gt;
  &lt;li class="menu-item"&gt;&lt;a href="#"&gt;contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;  
  </code></pre>