jquery实现简单二级菜单

<div id="nav" class="nav">
    <ul class="top_nav" id="top_nav">1
        <a href="###">
            <li>菜单一</li>
        </a>
        <a href="###">
            <li>菜单二</li>
        </a>
        <a href="###">
            <li>菜单三</li>
        </a>
    </ul>

    <ul>2
        <a href="###">
            <li>菜单一</li>
        </a>
        <a href="###">
            <li>菜单二</li>
        </a>
        <a href="###">
            <li>菜单三</li>
        </a>
    </ul>

    <ul>3
        <a href="###">
            <li>菜单一</li>
        </a>
        <a href="###">
            <li>菜单二</li>
        </a>
    </ul>

    <ul>4
        <a href="###">
            <li>菜单一</li>
        </a>
        <a href="###">
            <li>菜单二</li>
        </a>
        <a href="###">
            <li>菜单三</li>
        </a>
    </ul>
</div>

body {
	padding:0;
	margin:0;
	font-family:"microsoft yahei";
	background-color:#0c093c;
}
* {
	box-sizing:border-box;
}
.nav {
	width:400px;
	transform:translate(-50%,-50%);
	top:50%;
	left:50%;
	position:absolute;
}
ul {
	width:100px;
	height:20px;
	float:left;
	/* border:1px solid #ecfcff;
	*/
			cursor:pointer;
	background:black;
	line-height:20px;
}
li {
	height:40px;
	width:100px;
	background:#5f6caf;
	margin-left:-40px;
	text-align:center;
	line-height:40px;
	display:none;
	/* border:1px solid #ecfcff;
	*/
}
ul,li {
	color:#FFFFFF;
	font-size:15px;
	list-style:none;
	/* text-align:center;
	*/
}
a {
	text-decoration:none;
}

$('ul').hover(function() {
    $(this).addClass("top_nav").siblings().removeClass("top_nav");
    $(this).find('li').stop().slideDown(300);
    $(this).css("background", "red").siblings().css("background", "black");
}, function() {
    $(this).find('li').stop().slideUp(300);
});
$('li').mouseover(function() {
    $(this).css({
        "background": "#fe8761",
        "color": "black",
        "font-size": "18px"
    });
}).mouseout(function() {
    $(this).css({
        "background": "#5f6caf",
        "color": "white",
        "font-size": "15px"
    });
});