树状多层级菜单展示

<div class="tnav-o">
    <div class="tnav-column" style="display:block;">
        <div >
            <div class="tanvone" sta="1">一级菜单
                <div class="tline-r"></div>
            </div>
        </div> 
        
    </div>
    <div class="tnav-column tnav-column2" >
        <div sta="1">
            <div class="tline-long"></div>
            <div class="tanvone" sta="1">二级菜单一
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
            <div class="tanvone" sta="2">二级菜单二
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
            <div class="tanvone" sta="3">二级菜单三
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
            
        </div>
        
    </div>
    <div class="tnav-column tnav-column3">
        <div  sta="1">
            <div class="tline-long"></div>
            <div class="tanvone" sta="1">二(1) 三级菜单一
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
            <div class="tanvone" sta="2">二(1) 三级菜单二
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
            <div class="tanvone" sta="3">二(1)  三级菜单三
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
        </div>
        
        
        <div  sta="2">
            <div class="tline-long"></div>
            <div class="tanvone" sta="4">二(2) 三级菜单一
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
            <div class="tanvone" sta="5">二(2) 三级菜单二
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
            <div class="tanvone" sta="6">二(2) 三级菜单三
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
        </div>
        
        <div sta="3">
            <div class="tline-long"></div>
            <div class="tanvone" sta="7">二(3) 三级菜单一
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
            <div class="tanvone" sta="8">二(3) 三级菜单二
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
            <div class="tanvone" sta="9">二(3) 三级菜单三
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
        </div>
    </div>
    
    <div class="tnav-column tnav-column4">
        <div  sta="1">
            <div class="tline-long"></div>
            <div class="tanvone" sta="1">三(1) 四级菜单一
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
        </div>
        
        
        <div  sta="2">
            <div class="tline-long"></div>
            <div class="tanvone" sta="2">三(2) 四级菜单一
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
            <div class="tanvone" sta="3">三(2) 四级菜单二
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
        </div>
        
        <div sta="3">
            <div class="tline-long"></div>
            <div class="tanvone" sta="4">三(3) 四级菜单一
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
            <div class="tanvone" sta="5">三(3) 四级菜单二
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
        </div>
        
        <div sta="4">
            <div class="tline-long"></div>
            <div class="tanvone" sta="6">三(4) 四级菜单一
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
            <div class="tanvone" sta="7">三(4) 四级菜单二
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
        </div>
        
        <div sta="5">
            <div class="tline-long"></div>
            <div class="tanvone" sta="8">三(5) 四级菜单一
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
            <div class="tanvone" sta="9">三(5) 四级菜单二
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
        </div>
        
        <div sta="6">
            <div class="tline-long"></div>
            <div class="tanvone" sta="10">三(6) 四级菜单一
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
            <div class="tanvone" sta="11">三(6) 四级菜单二
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
        </div>
        
        <div sta="7">
            <div class="tline-long"></div>
            <div class="tanvone" sta="12">三(7) 四级菜单一
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
            <div class="tanvone" sta="13">三(7) 四级菜单二
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
        </div>
        
        <div sta="8">
            <div class="tline-long"></div>
            <div class="tanvone" sta="14">三(8) 四级菜单一
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
            <div class="tanvone" sta="15">三(8) 四级菜单二
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
        </div>
        
        <div sta="9">
            <div class="tline-long"></div>
            <div class="tanvone" sta="16">三(9) 四级菜单一
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
            <div class="tanvone" sta="17">三(4) 四级菜单二
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
        </div>
        
        
    </div>
    <div class="tnav-column tnav-column5">
        <div  sta="1">
            <div class="tline-long"></div>
            <div class="tanvone" sta="1">四(1) 五级菜单一
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
        </div>
        
        
        <div  sta="2">
            <div class="tline-long"></div>
            <div class="tanvone" sta="2">四(2) 五级菜单一
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
        </div>
        
        <div sta="3">
            <div class="tline-long"></div>
            <div class="tanvone" sta="3">四(3) 五级菜单一
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
            <div class="tanvone" sta="4">四(3) 五级菜单二
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
        </div>
        
        <div sta="4">
            <div class="tline-long"></div>
            <div class="tanvone" sta="5">四(4) 五级菜单一
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
            <div class="tanvone" sta="6">四(4) 五级菜单二
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
        </div>
        
        <div sta="5">
            <div class="tline-long"></div>
            <div class="tanvone" sta="7">四(5) 五级菜单一
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
            <div class="tanvone" sta="8">四(5) 五级菜单二
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
        </div>
        
        <div sta="6">
            <div class="tline-long"></div>
            <div class="tanvone" sta="9">四(6) 五级菜单一
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
            <div class="tanvone" sta="10">四(6) 五级菜单二
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
        </div>
        
        <div sta="7">
            <div class="tline-long"></div>
            <div class="tanvone" sta="11">四(7) 五级菜单一
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
            <div class="tanvone" sta="12">四(7) 五级菜单二
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
        </div>
        
        <div sta="8">
            <div class="tline-long"></div>
            <div class="tanvone" sta="13">四(8) 五级菜单一
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
            <div class="tanvone" sta="14">四(8) 五级菜单二
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
        </div>
        
        <div sta="9">
            <div class="tline-long"></div>
            <div class="tanvone" sta="15">四(9) 五级菜单一
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
            <div class="tanvone" sta="16">四(9) 五级菜单二
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
        </div>
         <div sta="17">
            <div class="tline-long"></div>
            <div class="tanvone" sta="15">四(17) 五级菜单一
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
            <div class="tanvone" sta="16">四(17) 五级菜单二
                <div class="tline-l"></div>
                <div class="tline-r"></div>
            </div>
        </div>
        
        
    </div>
   
    </div>

css:

<style type="text/css">
*{ margin:0; padding:0; font-family:微软雅黑; font-size:12px;}
.tnav-o{ width:1200px; height:1200px; overflow:visible; position:relative; color:#ff; margin:160px auto;}
.tnav-column{ width:auto; float:left; overflow:visible; float:left; margin-left:80px; position:relative; display:none;}
.tline-long{ width:1px; height:calc(100% - 40px); position:absolute; top:20px; left:-40px; background:#0097d4;}
.tanvone{ width:auto; height:30px; line-height:30px; text-align:center; padding:0 15px; color:#fff; background:#0097d4; margin:5px 0; position:relative; border-radius:5px; cursor:pointer;}
.tline-l{ width:40px; height:1px; background:#0097d4; position:absolute; top:50%; left:-40px;}
.tline-r{ width:40px; height:1px; background:#0097d4; position:absolute; top:50%; right:-40px; display:none;}
</style>

js:

<script>
$(function(){
    $('.tanvone').click(function(){
        
        var sta=$(this).attr('sta')
        flag=false;
        $(this).parents('.tnav-column').next().children('div').each(function(index, element) {
            if($(this).attr('sta')==sta){
                flag=true;
                }
        });
        //var flag=$(this).parents('.tnav-column').next().children('[sta='+sta+']')
        //console.log(flag)
        if(flag){
            $(this).siblings().children('.tline-r').hide()
            $(this).children('.tline-r').show()
            
            $(this).parents('.tnav-column').nextAll().hide()
            $(this).parents('.tnav-column').next().show()
            
            $(this).parents('.tnav-column').next().children().hide()
            $(this).parents('.tnav-column').next().children('div[sta='+sta+']').show()    
            $(this).parents('.tnav-column').next().find('.tline-r').hide()    
            var y = $(this).offset().top+$(this).height();
            var totop=$('.tnav-o').offset().top;
            y=y-totop-15;
            var boxH=$(this).parents('.tnav-column').next().height()
            boxH=boxH/2
            $(this).parents('.tnav-column').next().css('top',y)
            $(this).parents('.tnav-column').next().css('margin-top',-boxH)
        }else{
            $(this).children('.tline-r').hide()
        }
        
    })
    })
</script>

最终效果：