jQuery dropdown menu issue

Question

What I'm trying to do

I have a dropdown menu which I would like to display only when a user hovers over a link, and then disappear when the mouse leaves the menu and link.

What I'm struggling with

I can make the menu visible, but it disappears as soon as the mouse attempts to visit one li.

Code

Please see the jsFiddle at http://jsfiddle.net/u2Ym6/.

Here is a general rundown:

HTML

<div style="position: relative;">
    <a href="#" class="bold" id="userName">Welcome back, User</a>
    <ul id="userMenu">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

CSS

ul#userMenu {
    position:absolute;
    padding:10px;
    top:100%; left: 0;
    z-index:10;
    display:none;
}

ul#userMenu li {
    list-style:none;
    float:left;
    margin: 0 auto;
    width:100%;
}

jQuery

$(document).ready(function(){
    $('a#userName').bind('mouseover',openUserMenu);
    $('ul#userMenu').bind('mouseout',closeUserMenu);
});

function openUserMenu(){
    $('ul#userMenu').fadeIn(100);
}

function closeUserMenu(){
    $('ul#userMenu').fadeOut(250);
}

Illaya · Accepted Answer · 2014-06-05 10:57:51Z

1

Try mouseleave. Its working fine....

 $(document).ready(function(){
   $("a#userName").on("mouseover",function(){
      openUserMenu();
   });
   $("ul#userMenu").on("mouseleave", function(){
      closeUserMenu();
   });
});

and the fiddle is.... http://jsfiddle.net/Vz6Ms/

answered Jun 5, 2014 at 10:57

Illaya

6666 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pranav · Accepted Answer · 2014-06-05 11:04:01Z

0

I think you have binded mouse out to the wrong element.

$(document).ready(function(){
    $('a#userName').bind('mouseover',openUserMenu);
    $('a#userName').bind('mouseout',closeUserMenu);
});

Refer the fiddle : http://jsfiddle.net/6jtzV/1/

edited Jun 5, 2014 at 11:04

answered Jun 5, 2014 at 10:33

Pranav

6663 silver badges7 bronze badges

2 Comments

Ben Over a year ago

With this being the case, the menu disappears as soon as the user tries to select a menu option.

Ben Over a year ago

No - it shouldn't disappear at all while the cursor is either over the menu initiator (the link) OR the menu (the ul/li). The menu should only disappear when the cursor completely leaves the menu setup

Collectives™ on Stack Overflow

jQuery dropdown menu issue

What I'm trying to do

What I'm struggling with

Code

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

What I'm trying to do

What I'm struggling with

Code

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related