Question

I have a nav that looks like this

<nav>
    <ul>
        <li class="first active">
            <a href="#">nav 1</a>
            <ul>
                <li><a href="#">nav 1.1</a></li>
                <li><a href="#">nav 1.2</a></li>
                <li><a href="#">nav 1.3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">nav 2</a>
            <ul>
                <li><a href="#">nav 2.1</a></li>
                <li><a href="#">nav 2.2</a></li>
            </ul>
        </li>
        <li><a href="#">nav 3</a></li>
        <li><a href="#">nav 4</a></li>
        <li><a href="#">nav 5</a></li>
        <li><a href="#">nav 6</a></li>
    </ul>
</nav>

The active class is always initially set in the HTML. Currently using this really simple function to add/remove the active class on the list item, depending on which one the mouse is hovered over:

function primaryNav() { 

    var navigationLink = $('nav ul li');

    navigationLink.hover(function() { 
        $(this).addClass('active');
    })
    .mouseout(function() {
       $(this).removeClass('active');
    });

} 

This is fine to switch classes, I am just unsure how to make sure the class stays on the li when the mouse leaves the nav area entirely.

Answer 1

you could just remove all the active ones before setting a new one:

function primaryNav() { 
    var navigationLink = $('nav ul li');
    navigationLink.mouseenter(function() { 
        navigationLink.removeClass('active');
        $(this).addClass('active');
    })
    .mouseout(function() {
       //dont do anything
    });
}