導航下拉劃塊滑動效果, 隨著鼠標放到不同的導航, 下劃塊會跟著左右滑動

HTML代碼如下:

<div id="nav">
            <ul>
                <li>
                    <a href="">財經</a>
                </li> 
                <li>
                    <a href="">娛樂</a>
                </li>
                <li>
                    <a href="">NBA</a>
                </li>
                <li>
                    <a href="">綜藝</a>
                </li>
                <span class="slider"></span>
            </ul>
        </div>

jquery代碼如下:

$(function(){
        $("#nav>ul>li").hover(
            function(){
                let pos = $(this).position();
                    $(".slider").css({
                        'left' : pos.left + "px",
                    }).addClass("transform_slider");
            },
            function(event){
                $(".slider").removeClass("transform_slider");
            }
        );
    })

CSS樣式如下:

*{
    padding: 0; margin:0;
}
ul,ol,li{
    list-style: none;
}
a{
    text-decoration: none;
}
body{
    font-size: 14px;
    font-family: '微軟雅黑';
}
#nav{
    height: 44px;
    background-color: #0A0E11;
}
#nav>ul{
    width:500px;
    margin:0 auto;
    position: relative;
    height: 44px;
}
#nav>ul>li{
    width: 52px;
    height: 44px; line-height: 44px;
    float: left;
}
#nav>ul>li>a{
    color: #fff;
    display: block;
    height: 44px;
    text-align: center;
}

.slider{
    position: absolute;
    top:44px;
    left:0;
    width: 52px;
    height: 5px;
    background-color: #5FB878;
    transition:all .2s;
    -webkit-transition:all .2s;
    transform:scale(0,1);
    -ms-transform:scale(0,1);
    -webkit-transform:scale(0,1);
}
.transform_slider{
    
    transform:scale(1,1);
    -ms-transform:scale(1,1);
    -webkit-transform:scale(1,1);
}