jquery hover li>ul - keep visible until remove mouse from sub UL..

Question

Code:

        $("ul.menu_body li:even").addClass("alt");
        $('li a.menu_head').hover(function () {
            $('ul.menu_body').slideToggle('medium');
        },
            function(){
        $('ul.menu_body').slideToggle('medium');
            });

found this code somewhere on the web, originally it was a click event on "li a.menu_head" to show and hide "ul.menu_body".

the click works fine. I'd prefer a hover effect.

unfortunately my code instantly hides the UL as soon as you move the mouse off of the original LI. How could I adjust this so that the "ul.menu_body" remains visible until the mouse is off of the UL, instead of just "li a.menu_head".

thanks.

my html is

   <li> <a href="#" class="menu_head"></a>
      <ul class="menu_body">
        <li>content</li>
        <li>content</li>
      </ul>
   </li>

Answer 1

    $('li a.menu_head').hover(function () {
        $('ul.menu_body').show()
    });

    $('ul.menu_body').hover(function () {

    },
    function(){
        $('ul.menu_body').hide();
   });

a bit more trial and error and appears to do it..not sure if having a "blanK" function is correct tho.

Answer 2

You can try

    $('li a.menu_head').mouseenter(function () {
        $('ul.menu_body').slideDown('medium');
    });
    $('ul.main_UL_class_here').mouseleave(function(){
    $('ul.menu_body').slideUp('medium');
        });

Answer 3

The problem is you are using hover, try it this way

$(document).ready(function() { 
    $("ul.menu_body li:even").addClass("alt");
    $('ul.menu_body').slideToggle('medium');

    $('li a.menu_head').bind('mouseenter', function () {
        $('ul.menu_body').slideDown('medium');
    });
    $('.menu_body').bind('mouseleave', function(){
        $('ul.menu_body').slideUp('medium');
    });
});