jquery: appending a div causes mouseover/mouseout to loop

Question

I have a ul that I'm using for a nav menu. When a user mouses over the child li, I append to the li a div with the class of "nav-about" (or nav-whatever the class is for that li), and slideDown the appended div. I'm having a problem where my code get's caught in a loop and the li's mouseover/mouseout toggle back and forth until I move the mouse out of the li. Thank you for any and all help.

html

<div id="nav" class="nav">
    <ul id="header-menu" class="mainnav ">
        <li class="about">
            <a class="" id="about" href="http://www.example.com/projects/joanroot/about/">About</a>
        </li>
        <li class="paintings">
            <a class="" id="paintings" href="http://www.example.com/projects/joanroot/paintings/">Paintings</a>
        </li>
        <li class="worksonpaper">
            <a class="" id="worksonpaper" href="http://www.example.com/projects/joanroot/works-on-paper/">Works On Paper</a>
        </li>
        <li class="lectureseries">
            <a class="" id="lectureseries" href="http://www.example.com/projects/joanroot/lecture-series/">Lecture Series</a>
        </li>
        <li class="contact">
            <a class="" id="contact" href="http://www.example.com/projects/joanroot/contact/">Contact</a>
        </li>
    </ul>
</div>

css

div#nav {
    overflow: hidden;
}
.mainnav, #nav > ul {
    background: url("http://www.example.com/projects/joanroot/images/main-menu.gif") no-repeat scroll 0 0 transparent;
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 973px;
}
#nav > ul > li {
    display: inline;
}
#nav > ul > li > a {
    display: block;
    float: left;
    height: 54px;
    overflow: hidden;
    text-indent: -9999px;
    z-index: 100;
}
#nav ul li a#about {
    width: 154px;
}
div.nav-about {
    background: url("http://www.example.com/projects/joanroot/images/main-menu.gif") no-repeat scroll 0 -55px transparent;
    height: 54px;
    overflow: hidden;
    position: absolute;
    width: 154px;
}

jquery

InitilizeMenu('#header-menu',400,'slide','slide');

function InitilizeMenu(parent,moveSpeed,inStyle,outStyle) {
    $(parent).children('li').each(function() {
        var thisClass = $(this).attr('class');
        AttachNavEvents(parent,thisClass,moveSpeed,inStyle,outStyle);
    });
}

function AttachNavEvents(parent,thisClass,moveSpeed,inStyle,outStyle) {
    $(parent+' .'+thisClass).mouseover(function() {
        $(this).append('<div class="nav-'+thisClass+'"></div>')
        switch(inStyle) {
            case 'slide':
                $('div.nav-'+thisClass).css({display:'none'}).slideDown(moveSpeed);
                break;
            case 'fade':
                $('div.nav-'+thisClass).css({display:'none'}).fadeIn(moveSpeed);
                break;
            case 'none':
                $('div.nav-'+thisClass);
                break;
            default:
                $('div.nav-'+thisClass);
                break;
        }
    }).mouseout(function(){
        switch(outStyle) {
            case 'slide':
                $('div.nav-'+thisClass).slideUp(moveSpeed,function(){
                    $(this).remove();
                });
                break;
            case 'fade':
                $('div.nav-'+thisClass).fadeOut(moveSpeed,function(){
                    $(this).remove();
                });
                break;
            case 'none':
                $('div.nav-'+thisClass).remove();
                break;
            default:
                $('div.nav-'+thisClass).remove();
                break;
        }
    });
}

Answer 1

Why not use .hover() instead:

function AttachNavEvents(parent,thisClass,moveSpeed,inStyle,outStyle) {
    $(parent+' .'+thisClass).hover(function() {
        $(this).append('<div class="nav-'+thisClass+'"></div>')
        switch(inStyle) {
            case 'slide':
                $('div.nav-'+thisClass).css({display:'none'}).slideDown(moveSpeed);
                break;
            case 'fade':
                $('div.nav-'+thisClass).css({display:'none'}).fadeIn(moveSpeed);
                break;
            case 'none':
                $('div.nav-'+thisClass);
                break;
            default:
                $('div.nav-'+thisClass);
                break;
        }
    }, function() {
        switch(outStyle) {
            case 'slide':
                $('div.nav-'+thisClass).slideUp(moveSpeed,function(){
                    $(this).remove();
                });
                break;
            case 'fade':
                $('div.nav-'+thisClass).fadeOut(moveSpeed,function(){
                    $(this).remove();
                });
                break;
            case 'none':
                $('div.nav-'+thisClass).remove();
                break;
            default:
                $('div.nav-'+thisClass).remove();
                break;
        }
    });
}