Jquery 当尝试创建隐藏的导航栏时，MouseEnter和Mouseleve会避免问题

我试图创建一个隐藏的导航栏，当鼠标悬停在上面时，它的宽度会增加，当光标离开导航栏时，它会缩小到原来的宽度。我正在使用jQuery和Parallax.js，但mouseenter和mouseleave等的组合似乎都不起作用。作为我尝试做的一个例子，请遵循以下链接：

基本上，我想做同样的顶部导航，但在我的页面左侧。这是我的javascript：

$("#navigation").mouseenter(function(){
$("#navigation").animate({
    opacity: 1,
    width: "200px"
    },500,"swing"
);
$("#navigation ul").animate({
    opacity: 1,
    },500,"swing"
);
});

$("#navigation > ul").mouseleave(function(){
$("#navigation").animate({
    opacity: .75,
    width: "40px"
    },500,"swing"
);
$("#navigation ul").animate({
    opacity: 0,
    },500,"swing"
);  
});

以下是我的HTML：

<div id="navigation">
        <ul>
            <li id="aboutb">Home</li>
            <li>About</li>
            <li>Portfolio</li>
            <li>Contact</li>
            <li>Resume</li>
        </ul>   
</div>

主页
关于
投资组合
接触
恢复

我基本上遇到了div在动画中多次运行的问题，或者当我将鼠标悬停在div上时，它不会保持展开状态。在这个导航栏div后面有另一个页面宽的div

---

谢谢你的帮助

我在这里举了一个例子：

您面临的问题之所以发生，是因为您没有将div的溢出设置为hidden，这导致菜单在进入ul时展开，ul不可见，但在div之外

请检查链接处的示例中它是否工作