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?

Answer 1

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/

Answer 2

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.