将鼠标悬停在菜单链接上时，菜单会保持隐藏状态

Question

我有一个网站http://www.jordanswebsite.3eeweb.com。 （我知道它是面包，这是我必须做的一个项目，我选择面包）。在左边我有我的导航。我的问题是，当你将鼠标悬停时，就会出现这种情况。但如果你将鼠标悬停在链接上，它就会消失。这是我的代码：

HTML：

<div id="side_bar">
    <ul>
        <li>
            <a href="//jordanswebsite.3eeweb.com/index.php"> Home </a>
        </li>
        <li>
            <a href="//jordanswebsite.3eeweb.com/about/index.php"> About </a>
        </li>
        <li>
            <a href="//jordanswebsite.3eeweb.com/history/index.php"> History </a>
        </li>
        <li>
            <a href="//jordanswebsite.3eeweb.com/facts/index.php"> Facts </a>
        </li>
    </ul>

SCSS：

div#side_bar {
    position: fixed; left: -12%; top: 0;
    width: 15%; height: 100%;
    background: rgb(220, 221, 222);
    z-index: 99999;
    box-shadow: 0px 5px 15px 10px rgba(30, 30, 30, 0.5);
    overflow: hidden;

    ul {
        position: absolute; top: 20%; left: 0;
        width: 100%; height: auto;
        padding: 0 0;

        li {
            width: 100%; height: 5%;
            display: block;
            list-style: none;
            font-size: 4em;
            padding: 6% 2%;
            text-align: center;
            z-index: 9;
            position: relative; right: 5px;

            a {
                text-decoration: none;
                color: black;
            }
        }
    }
}

使用Javascript：

$(function() {
    $("div#side_bar").bind({
        mouseenter: function(event) {
            $(this).stop().animate({
                left: "0%"
            }, 300);
        },
        mouseout: function(event) {
            $(this).stop().animate({
                left: "-12%"
            }, 300);
        }
    });
});

注意：如果菜单在屏幕上显示不好，我很抱歉，我还没有为所有屏幕优化它。