<!-- 鼠标滑入标题后，子菜单从标题下方滑出 -->
    <div class="tab">
        <div class="div-tab">tab1</div>
        <ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
    </div>
    <div class="tab">
        <div class="div-tab">tab2</div>
        <ul ><li>1</li><li>2</li><li>3</li><li>4</li></ul>
    </div>
    <div class="tab">
        <div class="div-tab">tab3</div>
        <ul ><li>1</li><li>2</li><li>3</li><li>4</li></ul>
    </div>
    <div class="tab">
        <div class="div-tab">tab4</div>
        <ul ><li>1</li><li>2</li><li>3</li><li>4</li></ul>
    </div>
    <script>
        window.onload=function(){
            var aDiv1=document.getElementsByClassName('tab');
            var aul=document.getElementsByTagName('ul');
            var timer;
            for(var i=0;i<aDiv1.length;i++){
                aDiv1[i].index=i;
                var aIndex=aDiv1[i].index;
                aDiv1[i].onmouseover=function(){
                    for(var j=0;j<aDiv1.length;j++){if(this.index!=j){aul[j].style.height='0px';};};
                    aul[this.index].style.display='block';
                    aul[this.index].style.width='60px';
                    var index=this.index;
                    clearInterval(timer);
                    timer=setInterval(function(){
                        if(aul[index].offsetHeight>80){}else{aul[index].style.height=aul[index].offsetHeight+2+'px';};
                    },30);
                };
                aDiv1[i].onmouseout=function(){
                    var index=this.index;
                    clearInterval(timer);
                    timer=setInterval(function(){
                        if(aul[index].offsetHeight<=0){}else{aul[index].style.height=aul[index].offsetHeight-2+'px';}
                    },30);
                };
            };
        };
    </script>