jQuery Dropdown Menu Question

Question

Having some issues with my dropdown menu. Code here: http://jsfiddle.net/xY2p6/1/

Something simple I'm just not getting, but as you can see it's not functioning correctly. I'm not sure how to link the hiding of the dropdown to when the user hovers off of the menu link, rather than the actual dropdown.

Any ideas?

Nick Craver · Accepted Answer · 2010-09-17 14:36:09Z

3

Since your menu is inside the same <li> you can just attach the hover to it directly, like this:

$(function() {
    $(".dropdown").hover(function() {
        $(this).children("div.sub-menu").slideDown(200);
    }, function() {
        $(this).children("div.sub-menu").slideUp(200);
    });
});

You can give it a try here, or even simpler with .slideToggle(), like this:

$(function() {
    $(".dropdown").hover(function() {
        $(this).children("div.sub-menu").slideToggle(200);
    });
});

You can give it a try here.

answered Sep 17, 2010 at 14:36

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

3 Comments

RobertPitt Over a year ago

i would say 'Great Minds think alike' but your 84K is slightly intermediating hehe :)

dmackerman Over a year ago

Thanks, I knew the solution was simple. I added a .stop() on the second function to get rid of that repeating animation behavior that is so common with this stuff.

dmackerman Over a year ago

Interesting. The slideToggle() solution only works on jsfiddle for some reason. When I put it on the page and hover over the menu link, the menu will drop, but it wont go away unless you hover out and then back onto the menu link?

RobertPitt · Accepted Answer · 2010-09-17 14:37:09Z

3

Your javascript is slighty messed up.

$(document).ready(function() {
    $(".dropdown").hover(
        function(){
            $(this).children("div.sub-menu").slideDown(200);
        },
        function(){
            $(this).children("div.sub-menu").slideUp(200);
        }
    );
});

here you go: http://jsfiddle.net/xY2p6/4/

answered Sep 17, 2010 at 14:37

RobertPitt

57.3k21 gold badges117 silver badges161 bronze badges

Collectives™ on Stack Overflow

jQuery Dropdown Menu Question

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related