Question

I have a basic navigation menu which can be viewed at: http://jsfiddle.net/UXuvL/

The HTML:

<nav>
    <ul>
        <li>ABOUT
            <ul class="sub-menu">
                <li>PEOPLE</li>
                <li>APPROACH</li>
            </ul>
        </li>
        <li>PROJECTS</li>
        <li>CONTACT</li>
    </ul>
</nav>​

The CSS:

nav li { display: inline-block }
.sub-menu { display: inline-block; white-space: nowrap }​

The jQuery:

(function($) {
    $('.sub-menu').hide();

    $('nav li').on('hover', function(){        
        $('nav .sub-menu').animate({width: 'toggle'});
    });
})(jQuery);​

Functionally this is how I want it to work. You hover over “About” and “People” / “Approach” slide out to the right.

My biggest problem now is, if I go to hover over one of the new links that popped out, the menu hides. How can I stop this from happening?

Answer 1

Here you go man! You want to use mouseenter and mouseleave.

Updated your Fiddle

Html

<nav>
<ul>
    <li class='menu-header' >About
        <ul class="sub-menu">
            <li>People</li>
            <li>Approach</li>
        </ul>
    </li>

    <li class='menu-header' >Contact
        <ul class="sub-menu">
            <li>Email</li>
            <li>Phone</li>
        </ul>
    </li>

</ul>
</nav>

Jquery

(function($) {

    $('.sub-menu').hide();

    $('.menu-header').on({

        mouseenter: function() {
            $(this).find('ul.sub-menu').stop().animate({width: 'toggle'});
        },

        mouseleave: function(){
            $(this).find('ul.sub-menu').stop().animate({width: 'toggle'});
        }

     });


})(jQuery);