how to hide submenus in jquery menu

i have a menu like fllowing code

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?

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/

Use the mouseleave event