【下划线导航】下划线如果我想要改变长度和跟随怎么改呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下滑跟随导航</title>
<script src="../Jquery/jquery-3.4.1.min.js"></script>
<style>
*{margin: 0;padding: 0;}
.menu{
width: 900PX;
height: 40px;
background-color: #A9A9A9;
box-shadow: 0 2px 20px #636363;
border-radius: 2px;
margin: 20px auto;
position: relative;
}
ul{
list-style: none;
font-size: 15px;
text-align: center;
font-weight: bold;
}
li{
float: left;
width: 100px;
height: 1.875rem;
cursor: pointer;
line-height: 40px;
}
.block{
width: 100px;
height: 2px;
background: #008000;
top: 40px;
position: absolute;
}
</style>
<script>
$(function(){
$('li').hover(
function(){
$x=parseInt($(this).attr('name'))*100
$('.block').stop().animate({left:$x+'px'},200)
},
function(){
$('.block').stop().animate({left:'0px'},200)
}
)
})
</script>
</head>
<body>
<div class="menu">
<ul>
<li name='0'>首页</li>
<li name='1'>PHP</li>
<li name='2'>JAVA</li>
<li name='3'>HTML</li>
<li name='4'>C++</li>
</ul>
<div class="block"></div>
</div>
</body>
</html>