jQuery实现二级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        *{margin: 0;padding: 0}
        ul{float: left;width: 200px}
        ul li{background: #ccc;padding: 30px 10px}
        .myitems{float: left;width: 500px;height: 300px}
        .myitems div{width: 100%;height: 100%;display: none}
        .item1{background: #f03}
        .item2{background: #6fc}
    </style>
</head>
<body>
<ul >
    <li>12</li>
    <li>123</li>
</ul>
<div class="myitems">
    <div class="item1 item"></div>
    <div class="item2 item"></div>
</div>
<script>
    $(function(){
        $("li").mouseenter(function(){
            $(".item").hide().eq($(this).index()).show();
        }).mouseleave(function(){
            console.log("aaa");
            $(".item").eq($(this).index()).hide();
        })
        $(".item").mouseenter(function(){
            $(this).show()
        }).mouseleave(function(){
            $(this).hide()
        })
    })
</script>
</body>
</html>