话不多说，上代码：

html代码：

<div class="nav clearfix"><div class="bottomLine"></div><ul class="clearfix"><li class="nav__item"><a href="./index.html">首页</a></li><li class="nav__item zixun1"><a href="./行业资讯/hyzx.html">行业资讯</a></li><li class="nav__item gy1"><a href="./工业互联网/gyhlw.html">工业互联网</a></li><li class="nav__item cn1"><a href="./共享产能/gxcn.html">共享产能</a></li><li class="nav__item sj1"><a href="./共享设计/gxsj.html">共享设计</a></li><li class="nav__item yg1"><a href="#">共享用工</a></li><li class="nav__item"><a href="#">供应链金融</a></li><li class="nav__item"><a href="#">企业服务</a></li><li class="nav__item qy1"><a href="./会员企业风采/hyqyfc.html">会员企业风采</a></li><li class="nav__item"><a href="./关于我们/gywm.html">关于我们</a></li></ul></div>

css代码：

.nav {width: 975px;height: 70px;margin-left: 230px;float: left;position: relative;.bottomLine {position: absolute;left: 0px;bottom: 0;height: 4px;margin: 0;background-color: #0099ff;transition: all 0.3s ease;height: 2px;width: 0px;}ul {li {float: left;padding: 0 15px;font-size: 16px;font-family: Microsoft YaHei;cursor: pointer;text-align: center;span {position: absolute;left: 5px;bottom: 0;width: 0px;height: 3px;background-color: #52a6ff;}a {display: inline-block;color: black;}}}}

js代码：

   <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>$(".nav li").hover(function () {$(".bottomLine").css("width", parseFloat($(this).width()+20) + "px");$(".bottomLine").css("left", parseFloat($(this)[0].offsetLeft+4 ) + "px");$(".nav .bottomLine").stop(true, true).fadeIn(400);})
$(".nav").hover(function () {},function () {$(".bottomLine").css("width", 0 + "px");$(".nav .bottomLine").stop(true, true).fadeOut(400);}
);

效果图：