css实现导航栏a标签的下边框鼠标悬停的hover过渡效果

HTML

    <div class="nav">
        <ul>
            <li><a class="active" href="javascript:;">综艺</a></li>
            <li><a href="javascript:;">视频</a></li>
            <li><a href="javascript:;">番剧</a></li>
            <li><a href="javascript:;">影视</a></li>
            <li><a href="javascript:;">直播</a></li>
        </ul>
    </div>

CSS

<style>
        .nav {
            width: 50%;
        }

        ul {
            float: right;
            list-style: none;
        }

        li {
            float: left;
            width: 80px;
            height: 40px;            
        }
        a {
            text-decoration: none;
            display: inline-block;
            width: 50px;
            text-a