MarsOne MarsOne - 4 months ago 18
jQuery Question

How do i make my Jittery DropDown Menu stable?

Im trying to create a Drop-Down menu which appears when a user Hover's above his UserName.

Something that almost all websites have...
It works but when i hover above the Dropdown menu it jitters for a second. Why is this happening and how can i stop it?

Here is my FIDDLE

Here is my CODE
HTML

<a id="dnn_dnnUser_registerLink" title="Visit My Profile" class="UserLink" href="#">Test Account</a>

<ul id="account-dropdown" style="display: none;">
<li>My Account</li>
<li>My Orders</li>
<li>Logout</li>
</ul>


jQuery

$("#dnn_dnnUser_registerLink, #account-dropdown").hover(

function () {
$("#account-dropdown").slideDown(100);
}, function () {
$("#account-dropdown").slideUp(100);
});


CSS

#account-dropdown {
width:120px;
display: none;
background-color:#0A3151;
opacity:0.8;
position:absolute;
z-index:9999;
}
#account-dropdown li {
list-style:none;
}

Answer

You can check to see whether the target when mouse out is #dnn_dnnUser_registerLink or not, if not then slide up the hidden dropdown:

$("#dnn_dnnUser_registerLink, #account-dropdown").hover(function (e) {
    $("#account-dropdown").slideDown(100);
}, function (e) {
    if (!$(e.target).is('#dnn_dnnUser_registerLink')) {
        $("#account-dropdown").slideUp(100);
    }
});

Updated Fiddle