在mouseout上隐藏子菜单

On hover of "Saree", sub-menus div (id:second-level) is shown. Now, when I will move my pointer away from sub-menus screen, I want to hide this div. But using below code, whenever I hover on sub-menus, it gets hidden.

   j("#saree-menu").hover(function(){
        j("#second-level").show().mouseout(function(){
        j("#second-level").hide();
        });
    });

phtml code

<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('level1-menu')->toHtml(); ?>

<div id="second-level" class="second-level" style="display:none;">
<ul style="position:absolute">
    <li class="saree_menu"><?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('saree-menu')->toHtml(); ?></li>
</ul>
</div>

How, I can hide sub-menus div, when I take my pointer away from it?

Try to use it:

j("#saree-menu").hover(function(){
j("#second-level").show();
});    
j("#saree-menu").mouseout(function(){
    j("#second-level").hide();
});

try this:

j("#second-level").mouseout(function(){
    $("p").css("display", "none");
});

or use hide().

I really don't understand why you would use jQuery, so I'm going to give you a CSS answer.

#saree-menu:hover #second-level {
   display: block; /*or whatever you want to do with #second level*/
}

Whenever you hover on saree-menu, it will do whatever you put between {} and stop doing it when you leave.

You can have a look at the below link.

Fiddle

 #navigation{position:relative}
.sub-menu{position:absolute;display:none}
ul, li {list-style:none;margin:0;padding:0;display:inline}
.sum-menu li, .sub-menu ul {display:block}