Question

OK, so. I’m trying to create a dropdown menu of sorts using fadeToggle().

http://westrock.juggernautwebsites.com/ is where the site is currently located.

As you can see, when a user selects ‘Properties’, the fadeToggle occurs. However, after the dropdown occurs, and a user wants to select a li from the properties dropdown, they are unable to (I know I have return false; set, but that was supposed to be for the original ul, no?)

As well, when the child items are displaying, if you hover over About, the :hover effect displays on the Properties child li.

I’m boggled. Any help, greatly appreciated.

$('#menu-item-13').click(function() {
    $(this).children('ul').fadeToggle({
        duration: 200
    });
    return false;
});

*EDIT
I feel like I need to restrict the css and jQuery from affecting children list-items and a, but I don’t know how to do this. I thought children only went one level down the DOM, and since I selected ‘ul’, the function wouldn’t affect list-items…

Answer 1

Thanks for everyone’s help! Here’s what I eventually ended up using.

$('#primary li').hover(function() {
    $(this).children('ul').fadeToggle({
        duration: 200
    });
});
    $('menu-item-54').click(function() {
    return false;
});

What I was trying to accomplish upon hover (or click), the subnav would expand open.