I've created a drop down menu where each main link has a mouseenter and mouseleave event attached that first of all checks if there is a sub nav list associated with the link and then slides the menu into visibility. This works fine if you enter link 1 and leave the dropdown slides in then slides out but if you enter link 1 and then hover over link 2 the slideUp() consistency has gone, ideally i would like to make sure the active menu has closed before the new mouseenter code is run again. Can anyone suggest how I can achieve this?

Link to fiddle: http://jsfiddle.net/f3ZpN/1/

JS
Code:
var mainNav = $('.main-nav'),
    topLevelLinks = mainNav.children('li'),
    subNav = $('.sub-nav-panel'),
    subNavPanel,
    isActive = false,
    inner,
    innerLink;

topLevelLinks.on({
    mouseenter: function () {
        var el = $(this);

        if (el.children('.sub-nav').length > 0) {
            inner = el.children('.sub-nav');

            subNav.stop(true, true).slideDown(function () {
                inner.fadeIn();
            });
        }
    },
    mouseleave: function () {
        //make sure this finishes before mouseenter is run again?
        inner.fadeOut(function() {
            subNav.slideUp();
        });
    }
});