<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航下划线跟随</title>
</head>
<style>
*{margin:0;padding: 0}
li{list-style: none}
.menu{ width: 500px;height: 50px;margin:0 auto; background: #98c42b}
ul li{display: block;width: 100px;height: 50px;line-height: 50px;text-align: center;float: left;}
.block{width: 100px;height: 2px;background:#121461;position:relative;top: 48px;z-index: 2}
</style>
<script type='text/javascript' src="jquery-3.3.1.js"></script>
<script type='text/javascript'>
$(function(){
$('li').hover(
function(){
$x=parseInt($(this).attr('name'))*100
$('.block').stop().animate({left:$x+'px'},200)
$(this).css('background','#fbfbfb')
},
function(){
$('.block').stop().animate({left:'0px'},200)
$(this).css('background','#98c42b')
}
)
})
</script>
<body>
<div>
<ul>
<li name='0'>首页</li>
<li name='1'>新闻</li>
<li name='2'>案例</li>
<li name='3'>关于</li>
<li name='4'>联系</li>
</ul>
<div></div>
</div>
</body>
</html>
