CSS skills: 3) show sub-navigate items when mouse hove on nav-item

<header>
    <div class="am-g am-g-fixed">
        <ul class="am-avg-lg-2 topbar  flipInY animated">
            <li>
                <small class="diff1">全国连锁：</small>
                <a href="">
                    <small>南京</small>
                </a>
                <a href="">
                    <small>北京</small>
                </a>
                <a href="">
                    <small>沈阳</small>
                </a>
                <a href="">
                    <small>大连</small>
                </a>
                <a href="">
                    <small>苏州</small>
                </a>
                <a href="">
                    <small>无锡</small>
                </a>
                <a href="">
                    <small>常州</small>
                </a>
            </li>
            <li class="am-text-right diff">
                <a href="">
                    <small>KB+官网微信</small>
                </a>
                <small>|</small>
                <a href="">
                    <small>KB+官网微博</small>
                </a>
                <small>|</small>
                <a href="">
                    <small>热线：400-025-0505</small>
                </a>
                <a href="" class="topbarIco snwb animateCan"></a>
                <a href="" class="topbarIco txwb animateCan"></a>
                <a href="" class="topbarIco wx animateCan"></a>
            </li>
        </ul>

        <div class="diff3 am-cf">
            <img src="./amazeui-samples_files/topImg2.jpg" class="am-fr animated bounceInRight">
            <a href="./amazeui-samples_files/amazeui-samples.html"><img src="./amazeui-samples_files/headlogo.gif" class="animated bounceInLeft"></a>
            <img src="./amazeui-samples_files/topImg1.gif" class="am-margin-left-xl animated bounceInLeft">
        </div>

        <div>
            <ul class="am-avg-lg-8 nav">
                <li class="box am-text-center">
                    <a href="./amazeui-samples_files/amazeui-samples.html">首页<small class="am-block">Home</small></a>
                    <a href="./amazeui-samples_files/amazeui-samples.html" class="hover">首页<small class="am-block">Home</small></a>
                </li>
                <li class="box am-text-center">
                    <a href="http://kgdn.kangbeijia.cn/ppls">品牌连锁<small class="am-block">BRAND CHAIN</small></a>
                    <a href="http://kgdn.kangbeijia.cn/ppls" class="hover">品牌连锁<small class="am-block">BRAND CHAIN</small></a>
                </li>
                <li class="box am-text-center">
                    <a href="http://kgdn.kangbeijia.cn/zjtd" style="top: 0px;">专家团队<small class="am-block">Experts</small></a>
                    <a href="http://kgdn.kangbeijia.cn/zjtd" class="hover" style="top: 0px;">专家团队<small class="am-block">Experts</small></a>
                </li>                                
                <li class="box am-text-center">
                    <a href="http://kgdn.kangbeijia.cn/hxjs" style="top: 0px;">核心技术<small class="am-block">Technology</small></a>
                    <a href="http://kgdn.kangbeijia.cn/hxjs" class="hover" style="top: 0px;">核心技术<small class="am-block">Technology</small></a>
                </li>                                
                <li class="box am-text-center">
                    <a href="javascript:void(0)" style="top: 0px;">齿科项目<small class="am-block">DENTAL ITEMS</small></a>
                    <a href="javascript:void(0)" class="hover" style="top: 0px;">齿科项目<small class="am-block">DENTAL ITEMS</small></a>
                </li>                                
                <li class="box am-text-center">
                    <a href="http://kgdn.kangbeijia.cn/myal">美牙案例<small class="am-block">DENTAL CASE</small></a>
                    <a href="http://kgdn.kangbeijia.cn/myal" class="hover">美牙案例<small class="am-block">DENTAL CASE</small></a>
                </li>                                
                <li class="box am-text-center">
                    <a href="http://kgdn.kangbeijia.cn/shzr">社会责任<small class="am-block">Sociol duty</small></a>
                    <a href="http://kgdn.kangbeijia.cn/shzr" class="hover">社会责任<small class="am-block">Sociol duty</small></a>
                </li>                                
                <li class="box am-text-center diff">
                    <a href="javascript:void(0)" onclick="swtClick()" style="top: -0.551801899715483px;">在线咨询<small class="am-block">ASK ONLINE</small></a>
                    <a href="javascript:void(0)" onclick="swtClick()" class="hover" style="top: -0.551801899715483px;">在线咨询<small class="am-block">ASK ONLINE</small></a>
                </li>
            </ul>
        </div>
    </div>
</header>

<!--二级导行-->
<div class="navLevel">
    <div class="navLevelBox" style="">
        <div class="am-fl">
            <a href="http://kgdn.kangbeijia.cn/ppls/kbjnj/">康贝佳 • 南京</a>
            <a href="http://kgdn.kangbeijia.cn/ppls/jdcksb/">尖端齿科设备</a>
            <a href="http://kgdn.kangbeijia.cn/ppls/qglsjg/">全国品牌连锁</a>
            <a href="http://kgdn.kangbeijia.cn/ppls/aqjyhj/">安全就医环境</a>
            <a href="http://kgdn.kangbeijia.cn/ppls/ldjpbz/">六大金牌保障</a>
            <a href="http://kgdn.kangbeijia.cn/ppls/lylx/">具体来院路线</a>
            <a href="">品牌荣誉</a>
            <a href="">KB+ 官方微博</a>
        </div>
        <ul class="am-avg-lg-3 am-fl">
            <li><a href="http://kgdn.kangbeijia.cn/myal/"><img src="./amazeui-samples_files/navLevel2.jpg"></a></li>
            <li><a href="http://kgdn.kangbeijia.cn/zjtd/"><img src="./amazeui-samples_files/navLevel3.jpg"></a></li>
            <li><a href="javascript:void(0)" onclick="swtCLick()"><img src="./amazeui-samples_files/navLevel4.jpg"></a></li>
        </ul>
    </div>
    <div class="navLevelBox" style="display: none;">
        <div class="am-fl">
            <a href="http://kgdn.kangbeijia.cn/zjtd/gjzj/">KB+国际专家</a>
            <a href="http://kgdn.kangbeijia.cn/zjtd/gnzj/">KB+国内专家</a>
            <a href="">凯撒【希腊】</a>
            <a href="">牙齿种植：胡正元</a>
            <a href="">摩根【美国】</a>
            <a href="">牙齿美容：徐辉</a>
            <a href="">崔容硕【韩国】</a>
            <a href="">牙齿矫正：白延勇</a>
            <a href="">任势雄【韩国】</a>
            <a href="">口腔修复：陈 鹏</a>
        </div>
        <ul class="am-avg-lg-3 am-fl">
            <li><a href="http://kgdn.kangbeijia.cn/ppls/jdcksb/"><img src="./amazeui-samples_files/navLevel5.jpg" class=""></a></li>
            <li><a href="http://kgdn.kangbeijia.cn/hxjs/"><img src="./amazeui-samples_files/navLevel6.jpg"></a></li>
            <li><a href="javascript:void(0)" onclick="swtCLick()"><img src="./amazeui-samples_files/navLevel7.jpg"></a></li>
        </ul>
    </div>
    <div class="navLevelBox diff" style="display: none; height: 218px; padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px;">
        <div class="am-fl">
            <a href="">牙齿种植 |</a>
            <a href="">活动义齿 |</a>
            <a href="">全瓷牙 |</a>
            <a href="">假牙</a><br>
            <a href="">牙齿美容 |</a>
            <a href="">牙齿矫正 |</a>
            <a href="">美容冠 |</a>
            <a href="">镶牙</a><br>
            <a href="">牙齿美白 |</a>
            <a href="http://kgdn.kangbeijia.cn/kqbz/yczj/yxyz/">隐形矫正 |</a>
            <a href="http://kgdn.kangbeijia.cn/kqbz/ycmr/qctm/">瓷贴面 |</a>
            <a href="http://kgdn.kangbeijia.cn/kqbz/yczl/bay/">拔牙</a><br>
            <a href="">牙齿修复 |</a>
            <a href="http://kgdn.kangbeijia.cn/kqbz/yczl/ggzl/">根管治疗 |</a>
            <a href="http://kgdn.kangbeijia.cn/kqbz/ycmr/kcy/">烤瓷牙 |</a>
            <a href="http://kgdn.kangbeijia.cn/kqbz/yczl/by/">补牙</a><br>
            <a href="">不良冠体修复 |</a>
            <a href="">牙套</a>
        </div>
        <ul class="am-avg-lg-3 am-fl">
            <li><a href="http://kgdn.kangbeijia.cn/zjtd/"><img src="./amazeui-samples_files/navLevel3.jpg"></a></li>
            <li><a href="http://kgdn.kangbeijia.cn/ppls/jdcksb/"><img src="./amazeui-samples_files/navLevel5.jpg"></a></li>
            <li><a href="javascript:void(0)" onclick="swtCLick()"><img src="./amazeui-samples_files/navLevel4.jpg"></a></li>
        </ul>
    </div>
    <div class="navLevelBox diff" style="display: none; height: 218px; padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px;">
        <div class="am-fl">
            <a href="">牙齿缺损 |</a>
            <a href="http://kgdn.kangbeijia.cn/kqbz/yczz/ycsd/">牙齿松动 |</a>
            <a href="http://kgdn.kangbeijia.cn/kqbz/yczj/hy/">虎牙 |</a>
            <a href="">门牙突出</a><br>
            <a href="">牙齿缺失 |</a>
            <a href="http://kgdn.kangbeijia.cn/kqbz/yczj/dbt/">地包天 |</a>
            <a href="http://kgdn.kangbeijia.cn/kqbz/yczj/ycyj/">牙齿拥挤 |</a>
            <a href="http://kgdn.kangbeijia.cn/kqbz/yczj/by/">龅牙</a><br>
            <a href="">牙齿断裂 |</a>
            <a href="">瓜子牙 |</a>
            <a href="http://kgdn.kangbeijia.cn/kqbz/yczj/ycxs/">牙齿稀疏</a><br>
            <a href="http://kgdn.kangbeijia.cn/kqbz/ycmr/ssy/">色素牙 |</a>
            <a href="http://kgdn.kangbeijia.cn/kqbz/ycmr/ycxyh/">黄牙 |</a>
            <a href="http://kgdn.kangbeijia.cn/kqbz/ycmb/hy/">黑牙 |</a>
            <a href="http://kgdn.kangbeijia.cn/kqbz/ycmb/fby/">氟斑牙 |</a>
            <a href="http://kgdn.kangbeijia.cn/kqbz/ycmb/shsy/">四环素牙</a><br>
            <a href="">不良冠体 |</a>
            <a href="">牙痛 |</a>
            <a href="http://kgdn.kangbeijia.cn/kqbz/yczl/zy/">蛀牙 |</a>
            <a href="http://kgdn.kangbeijia.cn/kqbz/yczl/yzy/">牙周炎 |</a>
            <a href="http://kgdn.kangbeijia.cn/kqbz/yczl/yyy/">牙龈炎</a>
        </div>
        <ul class="am-avg-lg-3 am-fl">
            <li><a href="http://kgdn.kangbeijia.cn/hxjs/"><img src="./amazeui-samples_files/navLevel6.jpg" class=""></a></li>
            <li><a href="http://kgdn.kangbeijia.cn/myal/"><img src="./amazeui-samples_files/navLevel2.jpg"></a></li>
            <li><a href="javascript:void(0)" onclick="swtCLick()"><img src="./amazeui-samples_files/navLevel7.jpg"></a></li>
        </ul>
    </div>
    <div class="navLevelBox" style="">
        <div class="am-fl">
            <a href="http://kgdn.kangbeijia.cn/myal/zral/">KB+真人案例</a>
            <a href="http://kgdn.kangbeijia.cn/yydt/">康贝佳 • 动态</a>
            <a href="http://kgdn.kangbeijia.cn/myal/yczzal/">牙齿种植案例</a>
            <a href="">KB+官方微信</a>
            <a href="http://kgdn.kangbeijia.cn/myal/ycmral/">牙齿美容案例</a>
            <a href="">KB+官方微博</a>
            <a href="http://kgdn.kangbeijia.cn/myal/ycjzal/">牙齿矫正案例</a>
            <a href="http://kgdn.kangbeijia.cn/ppls/aqjyhj/">星级就医环境</a>
            <a href="http://kgdn.kangbeijia.cn/myal/ycmbal/">牙齿美白案例</a>
            <a href="http://kgdn.kangbeijia.cn/ppls/lylx/">具体来院路线</a>
        </div>
        <ul class="am-avg-lg-3 am-fl">
            <li><a href="http://kgdn.kangbeijia.cn/zjtd/"><img src="./amazeui-samples_files/navLevel3.jpg"></a></li>
            <li><a href="http://kgdn.kangbeijia.cn/ppls/jdcksb/"><img src="./amazeui-samples_files/navLevel5.jpg"></a></li>
            <li><a href="javascript:void(0)" onclick="swtCLick()"><img src="./amazeui-samples_files/navLevel4.jpg"></a></li>
        </ul>
    </div>
</div>

Control js:

//二级导行
        function showNav(i,t){
            $('.navLevel .navLevelBox').eq(i).stop().slideDown().siblings().stop().slideUp();
        }
        function hideNav(){
            $('.navLevel .navLevelBox').slideUp();
        }
        var hNav,index=0;
        $(document).on('mouseover','.nav li',function(){
            var _this=$(this);
            index=_this.index();
            if(index>=1 && index <=5){
                clearTimeout(hNav);
                showNav(index-1);
            }
        }).on('mouseleave','.nav li',function(){
            if(index>=1 && index <=5){
                hNav=setTimeout(hideNav,250);
            }
        });
        $(document).on('mouseover','.navLevel',function(){
            clearTimeout(hNav);
        }).on('mouseleave','.navLevel',function(){
            hNav=setTimeout(hideNav,250);
        });

        //二级动画效果
        var navlevelHover=new base.gClass.hover('.navLevel .navLevelBox li img','pulse animated');
        navlevelHover.hoverFun();