请老师看下，有什么地方可以完善吗？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="cs.css">
</head>
<body>
    <div class='nav_box'>
        <div class='nav_title'>
            <h3>慕课手机</h3    >
        </div>
        <div class='nav_right' id='nav_right'>
            <ul class='nav_ul' id='nav_ul'>
                <li data-n='0'>首页</li>
                <li data-n='1'>外观</li>
                <li data-n='2'>配置</li>
                <li data-n='3'>型号</li>
                <li data-n='4'>说明</li>
            </ul>
            <button class='btn'>立即购买</button>
            <div class='lis_downbar' id='lis_downbar'></div>
        </div>
    </div>
</body>
<script src="js.js">
</script>
</html>


*{margin:0; padding:0;}
.nav_box{
    width:100%;
    height: 70px;
    background-color: darkgrey;
}
.nav_box .nav_title{
    width: 1200px;
    height: 70px;
    float: left;
}
.nav_box .nav_title h3{
    line-height: 70px;
    margin-left: 50px;
}
.nav_box .nav_right{
    width: 720px;
    height: 70px;
    overflow: hidden;
    position: relative;
}
.nav_box .nav_right .nav_ul li{
   float: left;
   width: 65px;
   list-style: none;
   line-height: 70px;
   margin-left:30px;
}
.nav_box .nav_right .nav_ul li.current{
    color:red;
}
.nav_box .nav_right .btn{
    width: 90px;
    position: absolute;
    top:20%;
    height: 40px;
    background-color: #000;
    color:#fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.nav_box .nav_right .lis_downbar{
    width: 35px;
    height: 4px;
    background-color: greenyellow;
    position: absolute;
    left:29px;
    bottom: 10px;
    transition: all .5s ease 0s;
}

(function(){
    var navUl=document.getElementById('nav_ul')
    var lis=navUl.querySelectorAll('li')
    var bar=document.getElementById('lis_downbar')
    for(var i=0;i<lis.length;i++){
        lis[i].onmouseover=function(e){
            if(e.target.tagName.toLowerCase()=='li'){
                var t=e.target.getAttribute('data-n')
                e.target.className='current'
                if(t==0){
                    bar.style.left=29+'px'
                }
                e.target.style.cursor='pointer'
                bar.style.transition='all 0.5s ease 0s'
                bar.style.left=29+95*t+'px'
            }
        }
        lis[i].onmouseleave=function(e){
            e.target.className=e.target.getAttribute('data-t')
        }

    }
})()