我的二级菜单下拉效果如何优化？

我的菜单效果如下：
点击预览
现在我的情况是鼠标从一级指向二级的时候二级就会消失，二级的ul明明是在上级li里，为什么mouseenter不能持续有效。

mouseenter和mouseleave是不支持事件冒泡的

在鼠标从1级菜单中移除时，设置一个延时时间例如100毫秒，延时二级菜单的隐藏
添加对子菜单的mouseenter/mouseleave事件监听
在mouseenter清除定时器
mouseleave时将自己隐藏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../script/jquery-2.1.3.min.js"></script>
    <script>

         $(function(){
             //二级菜单展开效果
             var menuTimer;
             $('ul#menu-zhuyao>li').mouseenter(function() {
                 $('ul.sub-menu', this).show();
             });

             $('ul#menu-zhuyao>li').mouseleave(function() {
                 var that=this;
                 menuTimer=setTimeout(function(){
                     $('ul.sub-menu', that).hide();
                 },100);
             });

             $('ul.sub-menu').mouseenter(function() {
                 menuTimer&&clearTimeout(menuTimer);
             });

             $('ul.sub-menu').mouseleave(function() {
                 $(this).hide();
             });

         });

    </script>
    <title></title>
    <style>
        ul{
            list-style-type:none;
            margin:0;
            padding:0;
        }
        .menu-zhuyao-container {
            width: 300px;
            height:300px;
            position: absolute;
            top: 30px;
            background:#555;
        }
        ul#menu-zhuyao {
            padding: 0;
            margin: 0 auto;
            display: table;
        }
        ul#menu-zhuyao>li {
            float: left;
            margin: 20px;
            height: 20px;
            color: #fff;
            font-size: 15px;
            list-style-type: none;
            border-bottom: 2px solid #fff;
            position: relative;
        }

        ul#menu-zhuyao>li:hover {
            border-bottom: 2px solid #24ABEB;
        }

        ul#menu-zhuyao li a {
            color: #fff;
            cursor: pointer;
        }

        ul#menu-zhuyao li a:hover {
            color: #24ABEB;
        }

        .current-menu-item {
            border-bottom: 2px solid #24ABEB;
        }

        ul#menu-zhuyao ul.sub-menu {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 40px;
            z-index: 9;
            display: none;
            background-color: #fff;
            padding: 0;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        ul#menu-zhuyao ul.sub-menu::before {
            content: "";
            display: block;
            width: 0;
            height: 0;
            position: absolute;
            top: -10px;
            left: 50%;
            margin-left: -10px;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #fff;
            z-index: 2;
        }

        ul#menu-zhuyao ul.sub-menu::after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            position: absolute;
            top: -11px;
            left: 50%;
            margin-left: -10px;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #ddd;
            z-index: 1;
        }

        ul#menu-zhuyao ul.sub-menu>li {
            list-style-type: none;
            width: 80px;
            padding: 0;
            margin: 5px;
            text-align: center;
        }

        ul#menu-zhuyao ul.sub-menu>li a {
            color: #333;
        }

        ul#menu-zhuyao ul.sub-menu>li a:hover {
            color: #24abeb;
        }

    </style>
</head>
<body>

<div class="menu-zhuyao-container">
    <ul id="menu-zhuyao" class="menu">
        <li class="menu-item"><a href="#">一级1</a>
            <ul class="sub-menu" style="display: none;">
                <li class="menu-item"><a href="#">二级1</a></li>
                <li class="menu-item"><a href="#">二级1</a></li>
                <li class="menu-item"><a href="#">二级1</a></li>
            </ul>
        </li>
        <li class="menu-item"><a href="#">一级2</a>
            <ul class="sub-menu" style="display: none;">
                <li class="menu-item"><a href="#">二级2</a></li>
                <li class="menu-item"><a href="#">二级2</a></li>
                <li class="menu-item"><a href="#">二级2</a></li>
            </ul>
        </li>
    </ul>
</div>

</body>
</html>

【热门文章】