两种思想实现基于jquery的延时导航菜单，可做延时触发器！

1. 函数式

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)
        }

 2. 面向对象

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;
            height: 0px;

            overflow: hidden;
            -webkit-transition:     opacity linear 0.2s 1s;
            -o-transition:     opacity linear 0.2s 1s;
            transition:     opacity linear 0.2s 1s;

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

js如下：

        function delayController(obj){
            var _this=this;
            this.set={
                btn:$(".nav").eq(0),
                box:$(".box").eq(0),
                delayTime:200,
                showFn:function(_this){},
                hideFn:function(_this){}
            }
            $.extend(this.set,obj);
            this.timer=null;
            this.timer2=null;
            this.set.btn.mouseenter(function(){ show(); })
            this.set.btn.mouseleave(function(){ hide(); })
            this.set.box.mouseenter(function(){ show(); })
            this.set.box.mouseleave(function(){ hide(); })
            function show(){
                clearTimeout(_this.timer);
                _this.timer2=setTimeout(function(){
                    _this.set.showFn(_this);
                },_this.set.delayTime)
            }
            function hide(){
                clearTimeout(_this.timer2);
                _this.timer=setTimeout(function(){
                    _this.set.hideFn(_this);
                },_this.set.delayTime)
                
            }
        }
                
               //调用
        $(".nav").each(function(i,ele){
            new delayController({
                btn:$(".nav").eq(i),
                box:$(".inter-box").eq(i),
                showFn:function(_this){
                    _this.set.box.animate({"height":"200px"});
                },
                hideFn:function(_this){
                    _this.set.box.animate({"height":"0px"});
                }
            });
        })