Menu hover submenu - longer time

Question

I want to increase the freezing timing for the sub-menu to stay same when I mouseover it. Here's my code :

<div class="navbar-collapse collapse">
    <ul id="subnav" class="nav navbar-nav">
        <li style="width: 16.6666666666667%">
        <li style="width: 20%">
            <a style="width: 16.6666666666667%" href="/">Home</a>
        </li>
        <li style="width: 20%"><a style="width: 16.6666666666667%">Corporate Information</a><div class="sub-menu" style="overflow: hidden; display: none;">
            <div class="menuInnerLeft"><span>Transforming Care Bringing Health to Every Home 1</span></div>
            <div class="menuInnerRight">
                <ul>
                    <li>
                        <a class="subNavItem" href="http://www.juronghealth.com.sg/We_Are_JurongHealth/Our_Vision_Mission_Value.aspx" target="_blank">Vision, Mission &amp; Values</a>
                    </li>
                    <li>
                        <a class="subNavItem" href="http://www.juronghealth.com.sg/We_Are_JurongHealth/At_the_Helm.aspx" target="_blank">Board &amp; Senior Management</a>
                    </li>
                </ul>
            </div>
    </ul>
</div>

Answer 1

Try this

$(document).ready(function(){
    $('ul.nav li.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
    }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
    });  
});

Answer 2

You can use the Jquery hover:second parameter which is the function to use when you leave the element:

$(".menu_item").hover(
    function(){},
    //When hovering the item: stuff

    //When You leave the item:
    function(){
        //Leave duration time:
        var duration = 500;
        setTimeout(function(){}, duration );
    }
);

Or benefit the jquery stop() function.