how to hide submenus in jquery menu

Question

i have a menu like fllowing code

Home

• Sub Item 1
  • Sub Item 1.1
    • Sub Item 1.1.1
    • Sub Item 1.1.2
  • Sub Item 1.2
  • Sub Item 1.3
  • Sub Item 1.4
  • Sub Item 1.5
  • Sub Item 1.6
  • Sub Item 1.7
• Sub Item 2
• Sub Item 3

Product Info

• Sub Item 1
• Sub Item 2
  • Sub Item 2.1
  • Sub Item 2.2
• Sub Item 3
• Sub Item 4
• Sub Item 5
• Sub Item 6
• Sub Item 7

and a css file to arrange items as verical menu, i show submenu with in jquery like this

$(document).ready(function(){
    var ss="#menu li:hover>div";
    $("div#menu li:parent").hover(function(){
        $(ss).show(500);

    });
});

now how i hide this submenu while mouse leave on items???? anyone can help me?

Answer 1

You mean somethign like this:

var ss = "#menu li:hover>div";
$("div#menu li:parent").hover(
    function() {
        $(ss).show(); //this is the mousein
    },
    function() {
        $(ss).hide(); //this is the mouseout
    }
);

Remember that hover can take two callbacks, and the second callback will be called when the mouse leaves the element.

http://api.jquery.com/hover/

Answer 2

Use the mouseleave event