jquery: добавление div приводит к зацикливанию при наведении/отсутствии мыши

У меня есть ul, который я использую для навигационного меню. Когда пользователь наводит указатель мыши на дочерний li, я добавляю к li div с классом «nav-about» (или nav-любой класс для этого li) и скользю вниз по присоединенному div. У меня проблема, когда мой код зацикливается, а наведение/выключение мыши li переключается вперед и назад, пока я не выведу мышь из li. Спасибо за любую помощь.

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;
        }
    });
}