Question

I’m putting together a simple drop down that contains nested ul’s. I want it to animate to a visible state when hovering over the top level li. And, then animate to a hidden state when the mouse leaves the entire navigation area.

It works fine when animating to a visible state. My problem is the hiding part. It seems to fire the mouseleave whenever the mouse leaves the top level li. I though that mouseleave shouldn’t do that for child elements unless I’m thinking wrong.

Below is the code. Any help or insight is appreciated.

$(document).ready(function() {

        //When mouse rolls over
        $('#mainNavBar li').mouseenter(function(){
            $('.menuDrop').stop().animate({height:'163px'},{ queue:false, duration:300, easing: 'easeInQuart'})
        });

        //When mouse is removed
        $('#mainNavBar li').mouseleave(function(){
            $('.menuDrop').stop().animate({height:'0px'},{ queue:false, duration:300, easing: 'easeOutQuart'})
        });

    });

And the HTML

<ul id="mainNavBar">
                <li id="pos1"><a href="#"><span class="accesslinks">TOP 1</span></a>
                    <div class="menuDrop">
                        <ul class="products">
                            <li class="active">Product 1</li>
                            <li>Product 2</li>
                            <li>Product 3</li>
                            <li>Product 4</li>
                        </ul>
                        <ul class="tabs">
                            <li class="selected"><a href="#">Tab 1</a></li>
                            <li><a href="#">Tab 2</a></li>
                            <li><a href="#">Tab 3</a></li>
                            <li><a href="#">Tab 4</a></li>
                        </ul>
                    </div>
                </li>
                <li id="pos2"><a href="#"><span class="accesslinks">TOP 2</span></a>
                    <div class="menuDrop">
                        <ul class="products">
                            <li class="active">Product 5</li>
                            <li>Product 6</li>
                            <li>Product 7</li>
                            <li>product 8</li>
                        </ul>
                        <ul class="tabs">
                            <li class="selected"><a href="#">Tab 1</a></li>
                            <li><a href="#">Tab 2</a></li>
                            <li><a href="#">Tab 3</a></li>
                            <li><a href="#">Tab 4</a></li>
                        </ul>
                    </div>
                </li>
            </ul>

Answer 1

The problem is that #mainNavBar li matches all li elements within #mainNavBar at any level. That means that it matches the inner li elements as well. If you want it to only happen on the direct children change your selector to #mainNavBar > li.

Also, I’m thinking you probably want $(this).find('.menuDrop') instead of just $('.menuDrop'), otherwise you will affect all .menuDrop elements and not just the ones that are within your hovered li.

You may also want to try hover to simplify your code.

http://api.jquery.com/hover/