mouseout appears to be firing on mouseenter

Question

It's a navigation menu with big drop downs containing sub pages. The drop downs should only appear when clicking the main nav li, then hide when leaving the li and/or the .subNav div inside the li. It shows on click as it should, but as soon as I try to enter the .subNav div, the entire drop down hides again ("clicked" class is removed).

Here's the HTML of a navigation li and its .subNav drop down.:

<li><a class="more">MORE</a>
    <div class="subNav more">

        <div class="subNavGroup">
            <h4>Sub Group 1</h4>
            <ul>
                <li><a href="#">This Thing vs That There</a></li>
                <li><a href="#">This Thing vs That There</a></li>
                <li><a href="#">This Thing vs That There</a></li>
            </ul>
        </div><!-- .subNavGroup -->

        <div class="subNavGroup">
            <h4>Sub Group 2</h4>
            <ul>
                <li><a href="#">This Thing vs That There</a></li>
                <li><a href="#">This Thing vs That There</a></li>
                <li><a href="#">This Thing vs That There</a></li>
                <li><a href="#">This Thing vs That There</a></li>
                <li><a href="#">This Thing vs That There</a></li>
            </ul>
        </div><!-- .subNavGroup -->

        <div class="subNavGroup">
            <h4>Sub Group 3</h4>
            <ul>
                <li><a href="#">This Thing vs That There</a></li>
            </ul>
        </div><!-- .subNavGroup -->


    </div><!-- .subNav -->
</li>

Here's the jQuery that adds the "clicked" class to the li on click, and is supposed to not remove it until mouseout, but is doing it on mouseenter instead.

// make the drop down menus appear on click and dissapear on mouse out
$('.mainNav2 li').live('click', function() {
    $(this).addClass('clicked');
});

$('li.clicked').live('mouseout', function(){
    $('li.clicked').removeClass('clicked');
});

Answer 1

This fixed it. Not sure why the original didn't work (probably event bubbling or something).

// make the drop down menus appear on click and dissapear on mouse out
$('.mainNav2 li').live('click', function() {
    $(this).addClass('clicked');
});

$('.mainNav2 > li').mouseleave(function(){
    $('li.clicked').removeClass('clicked');
});