基于jquery的延时导航菜单，可做延时触发器！

html如下：

    <div class="box">
        <ul class="clear-fix">
            <li class="outer">
                <a href="#" class="nav">index</a>
                <ul  class="inter-box clear-fix">
                    <li><a href="#">inter1</a></li>
                    <li><a href="#">inter1</a></li>
                    <li><a href="#">inter1</a></li>
                    <li><a href="#">inter1</a></li>
                </ul>
            </li>
            <li class="outer">
                <a href="#" class="nav">index1</a>
                <ul  class="inter-box clear-fix">
                    <li><a href="#">inter1</a></li>
                    <li><a href="#">inter1</a></li>
                    <li><a href="#">inter1</a></li>
                    <li><a href="#">inter1</a></li>
                </ul>
            </li>
            <li class="outer">
                <a href="#" class="nav">index2</a>
                <ul  class="inter-box clear-fix">
                    <li><a href="#">inter1</a></li>
                    <li><a href="#">inter1</a></li>
                    <li><a href="#">inter1</a></li>
                    <li><a href="#">inter1</a></li>
                </ul>
            </li>
            <li class="outer">
                <a href="#" class="nav">index3</a>
                <ul  class="inter-box clear-fix">
                    <li><a href="#">inter1</a></li>
                    <li><a href="#">inter1</a></li>
                    <li><a href="#">inter1</a></li>
                    <li><a href="#">inter1</a></li>
                </ul>
            </li>
        </ul>
    </div>

css如下：

    body{
        position: relative;
        z-index: 1;
    }
    ul,li{list-style: none;}
    *{padding: 0;margin: 0;}
        .clear-fix:after{
            content: ".";
            clear: both;
            display: block;
            font-size: 0;
            height: 0;
            visibility: hidden;
        }
        .box{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 60px;
            z-index: 100;
            text-align: center;
            background: #ccc;

        }
        .outer{
            float: left;
            line-height: 60px;
            padding: 0 15px;
            position: relative;
            /*z-index: -5;*/
        }

        .inter-box{
            position: absolute;
            width: 100%;
            top: 60px;
            left: 0;
            /*display: none;*/
            height: 0px;
            overflow: hidden;
            -webkit-transition:     opacity linear 0.2s 1s;
            -o-transition:     opacity linear 0.2s 1s;
            transition:     opacity linear 0.2s 1s;

        }
        .nav{
            display: block;
            width: 100%;
            height: 100%;
        }
        .inter-box li{
            background: #dfdfdf;
            line-height: 30px;
        }

js如下，需引入jquery：

        var timer=initTimer();
        $(".nav").each(function(i,ele){
            $(ele).attr("index",i);
            $(ele).mouseenter(function(){
                var _this=$(this).attr("index")
                show(_this);
            })
            $(ele).mouseleave(function(){
                var _this=$(this).attr("index");
                hide(_this);
            })

        })
        $(".inter-box").each(function(i,ele){
            $(ele).attr("index",i);
            $(ele).mouseenter(function(){
                console.log(111)
                var _this=$(this).attr("index")
                show(_this);
            })
            $(ele).mouseleave(function(){
                var _this=$(this).attr("index");
                hide(_this);
            })
        })
        function initTimer(){
            var timer={};
            $(".nav").each(function(i,ele){
                timer[i]=null;
            });
            return timer;
        }
        function show(nowIndex){
            clearTimeout(timer[nowIndex]);
            $(".inter-box").eq(nowIndex).animate({"height":"300px"});
        }
        function hide(nowIndex){
            timer[nowIndex]=setTimeout(function(){
                $(".inter-box").eq(nowIndex).animate({"height":"0px"});
            },200)
        }