Menu from jquery-ui

Question

I was using the menu function from jQuery-ui. See my example fiddle

My problem is that when you mouse-over a menu and you exit, all submenu exits too. But when you are in a submenu and you leave, the submenu will stay open. it won't close until you click outside the menu

I tried to add this code but it won't work :

$("#menu").mouseleave( function(){
   $(".ui-menu-item").collapseAll();
});

I want the submenu to disappear too once I leave with the mouse

Answer 1

I think this will helpful for you.

Add the class submenu for <ul> tag.

HTML

<ul id="menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a>
        <ul class="submenu">
            <li><a href="#">Item 3-1</a></li>
            <li><a href="#">Item 3-2</a></li>
            <li><a href="#">Item 3-3</a></li>
            <li><a href="#">Item 3-4</a></li>
            <li><a href="#">Item 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
</ul>

JQuery

$(".submenu").mouseout( function(){
   $(".submenu").hide();
});
$(".submenu").mouseover( function(){
   $(".submenu").show();
});

Demo Url : http://api.jquery.com/mouseout/