Prevented Timed-out box

by Joe Saad

HTML

<ul id="connect">
    <li>
        login
        <div id="loginBox" class="subDiv">
            Here is the login
        </div>
    </li>
    <li>Contact</li>
    <li>Social</li>
</ul>

CSS

#connect li > div {display:none;}
#loginBox {border:1px solid red;}

JavaScript

$("#connect li").mouseenter(function(){
    clearTimeout($(this).data('timeoutId'));
    $(this).find(".subDiv").show();
}).mouseleave(function(){
    var someElement = $(this);
    var timeoutId = setTimeout(function(){
        someElement.find(".subDiv").hide();
    }, 3000);
    //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
    someElement.data('timeoutId', timeoutId); 
});