纯CSS3底部滑动导航效果

闲来无事用css和jQuery写了个导航效果（可放开注释移除jQuery操作部分）如下效果：

html 部分

<ul id='ul_all'>
<!-- <li class="active">首页</li>
     <li>首页1</li>
     <li>首页2</li>
     <li>首页3</li>
     <li>首页4</li>
     <li>首页5</li>
     <li class="more">
         更多
         <div class="more_all">
             <dl>
                 <dd>首页6</dd>
                 <dd>首页7</dd>
                 <dd>首页8</dd>
                 <dd>首页9</dd>
             </dl>
         </div>
     </li> -->
</ul>

css 部分

<style>
   ul,dl,dd{margin: 0;padding: 0;}
   #ul_all{display: flex;}
   li{list-style: none;width: 100px;padding: 10px 0;text-align: center;margin: 0;position: relative;}
   li::before {
       content: "";
       position: absolute;
       top: 0;
       left: 100%;
       width: 0;
       height: 100%;
       /* 内边线 */
       box-sizing: border-box;
       border-bottom: 2px solid #000;
       /* 过滤动画 */
       transition: 0.2s all linear;
   }
   li:hover::before {width: 100%;left: 0;}
   li:hover ~ li::before {left: 0;}
   #ul_all>.active{border-bottom: 2px solid #000;}
   .active::before{border:none;}/*,.more:before*/

   /* 更多 */
   /* .more{border:2px solid #fff;} */
   .more_all{position: absolute;display: none;padding: 10px 0;}
   .more_all dl{border: 1px solid #999;}
   .more_all dd{padding: 5px 25px;}
   /* .more:hover::before{border: none;} */
   .more:hover .more_all{display: block;top:41px;}
   .more_all .active{color:red;}
</style>

js 部分

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    $(function(){
        // 点击切换同时清掉鼠标移入选中类
        $("#ul_all").on("click","li",function(){
            $(this).addClass('active').siblings().removeClass('active');
            $(this).siblings().find('dd').removeClass('active');
        });
        // 隐藏部分点击
        $("#ul_all").on("click","dd",function(){
            $(this).addClass('active').siblings().removeClass('active');
        });

        get_data_list();
    });

    function get_data_list(){
        var html_z = '',html='<li class="active">首页</li>';
        var list = ['测试1','测试2','测试3','测试4','测试5','测试6','测试7'];
        $.each(list,function(i,d){
            if(i < 4){
                html += '<li>'+ d + '</li>';
            }else{
                html_z += '<dd>'+ d + '</dd>';
            }
        });

        // 更多
        var more = '<li class="more">更多<div class="more_all">'+
            '<dl>'+ html_z +'</dl>'+
            '</div></li>';

        $("#ul_all").html(html + more);
    }
</script>