Jquery下拉子菜单不允许我点击子菜单项

Question

这是菜单和子菜单的html代码，其中我声明了用于创建菜单项的ul和li项目。当我将光标悬停在“home”上时，它会向下滑动子菜单，当我尝试单击子菜单项时它会滑动它起来。

<nav id="nav">
    <ul>
        <li><a href="index.html">Home &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</a>
            <ul>
                <li><a href="#">11th</a></li>
                <li><a href="#">11th</a></li>
            </ul>
        </li>
        <li><a href="about.html">About &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</a></li>
        <li><a href="testimonials.html">Testimonials &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</a></li>
        <li><a href="news.html">News + Article &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

CSS代码 这是css代码，我在其中设置菜单和子菜单的样式，也适用于子菜单。

#nav{background: #1a1511; height: 50px;}
#nav li li:hover{background: #ccc; cursor: pointer;}
#nav ul, #nav li{list-style-type: none; padding:0; margin:0;}
#nav li{float: left; width: 160px; line-height: 50px; list-style-type: none; text-align: center;}
#nav li ul{position: absolute; background: #1a1511; display: none; }
#nav li li{float: none; padding: 2px;}
#nav a{color: #fff; text-decoration: none;}

js代码

$(function(){
        $("#nav li").hover(function(){

            $(this).find("ul").slideToggle('medium');
        });

        var submenu = $("li > ul > li");

        submenu.hover(function(){
            $(this).find("ul").slideToggle(200);
        });
});