Question

I have a vertical sliding menu but there’s a few things I’m missing and not sure how to do.

• I want all the sub menu items to be closed when the page load/refreshes
• 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)

Here’s the code and thanks

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>

<script type='text/javascript'>
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");
});  
});
</script>



<div class="menu-container">
<ul id="secondpane">
<li><a href="#">home</a></li>
<li class="menu-item"><a href="#">about us</a></li>
    <li class="menu_body"><ul>
        <li class="menu-item"><a href="#">testimonials</a></li>
        <li class="menu-item"><a href="#">full width page</a></li>
    </ul></li>
<li class="menu-item"><a href="#">blog</a></li>
    <li class="menu_body"><ul>
        <li class="menu-item"><a href="#">web design</a></li>
        <li class="menu-item"><a href="#">illustrations</a></li>
        <li class="menu-item"><a href="#">art inspiration</a></li>
    </ul></li>
<li class="menu-item"><a href="#">portfolio</a></li>
<li class="menu-item"><a href="#">contact</a></li>
</ul>
</div>  

Answer 1

This works!

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>

<style>
li {list-style: none;}
</style>

<script type='text/javascript'>
var $ = jQuery.noConflict();
$(document).ready(function(){
                             $("#secondpane li.menu-item ul").hide();

                             $("#secondpane li.menu-item").hover(function(){
                                  $(this).children("ul").slideDown(500);
                             },function(){
                                  $(this).children("ul").slideUp(500);
                             });

});
</script>



<div class="menu-container">
<ul id="secondpane">
<li><a href="#">home</a></li>
<li class="menu-item"><a href="#">about us</a>
    <ul>
        <li><a href="#">testimonials</a></li>
        <li ><a href="#">full width page</a></li>
    </ul></li>
<li class="menu-item"><a href="#">blog</a>
    <ul>
        <li><a href="#">web design</a></li>
        <li><a href="#">illustrations</a></li>
        <li><a href="#">art inspiration</a></li>
    </ul></li>
<li class="menu-item"><a href="#">portfolio</a></li>
<li class="menu-item"><a href="#">contact</a></li>
</ul>
</div>