Jquery slide toggle dropdown disappears when mouse leaves

Question

I've been trying to practice making sliding menus with slidetoggle, slidedown/up...etc but I can't seem to get this right if I want to hover over the menu.

I've got this so far but it works only on click and it doesn't go away after moving away from the menu item. So I would like to just hover over the main menu item and then drop the dropdowns. Any help is appreciated!!

 <form id="form1" runat="server">


        <div id="multiDropMenu">
            <ul id="menu">
                <li><a href="#" id="places">Places</a>
                    <ul id="dropdown1">
                        <li><a href="http://google.com">To Go</a></li>
                        <li><a href="#">To See</a></li>
                    </ul>
                </li>
                <li><a href="#">Transportation</a></li>
            </ul>
        </div>

    </form>


    <script type="text/javascript">
        $(document).ready(function() {
            $("#places").toggle(function() { $("#dropdown1").slideDown("fast"); },

                                function() { $("#dropdown1").slideUp("fast"); });


        });

    </script>

Answer 1

You can use .hover() on the parent <li> and .slideToggle() since it's a child, like this:

$(function() {
   $("#places").parent().hover(function() { 
      $("#dropdown1").slideToggle("fast"); 
   });
});​

You can give it a try here, this lets you hover anywhere in the <li>, you could also make it much more generic, like this:

 $("#menu li").hover(function() { 
    $(this).find("ul").slideToggle("fast"); 
 });

You can try that version here, it works much better for any number of items, no need for IDs on each.

Answer 2

Just change $("#places").toggle to $("#places").hover

See demo here: http://jsfiddle.net/mftWK/