CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ben
Ben

Reputation: 9001

jQuery dropdown menu issue

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);
}

Upvotes: 0

Views: 77

Answers (2)

Pranav
Pranav

Reputation: 666

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/

Upvotes: 0

Illaya
Illaya

Reputation: 666

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/

Upvotes: 1

Related Questions