jQuery, fadeToggle, and list-items

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

Your example doesn't work at all for me, but if I'm understanding you correctly, you want the child ul to not be affected by the click handler attached to the parent. You can do this:

$('#menu-item-13 > ul').click(function(e){
   e.stopPropagation();

   // ... do your thing
});

This basically stops the click on the ul from bubbling up to the parent #menu-item-13 . Because of this, the fadeToggle will also not trigger from the click on the ul, so if that is still needed you will have to add it to the ul 's click.

Answer 2

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.