下划线跟随导航
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery三级下拉菜单导航</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript" src=""></script>
<link rel="stylesheet" type="text/css" href="">
<style type="text/css">
*{margin:0px;padding: 0px;}
body{background: #fff;font-size:14px;}
ul{list-style: none;}
a{text-decoration: none; color: #aaa;}
.header{width:100%;height: 40px;background: #ccc;}
.header .nav{width: 960px;margin:0 auto;position: relative;}
.borde{height: 2px;overflow: height;width: 158px;background-color: red;position: absolute;top:38px;}
.nav .nav-1>li{float: left;background: #000; width: 158px;height: 38px;line-height: 40px;text-align: center;border: 1px solid #333;}
.nav .nav-2>li,.nav .nav-3>li{background: #000; width: 158px;height: 20px;line-height: 20px;text-align: center;border: 1px solid #333;position: relative;color: #fff;}
.nav .nav-3{position: absolute;left:158px;top:0px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
//下划线跟随效果
$('.nav-1>li').hover(
function(){
$x=parseInt($(this).attr('name'))*160;
$('.borde').stop().animate({left:$x+'px'},300)
},
function(){
$('.borde').stop().animate({left:'0px'},300)
}
)
//隐藏下级导航
$('.nav-2').hide();
$('.nav-3').hide();
//移动到某个元素上时，显示对应的下级菜单
$('.nav-1>li').mouseover(function(){
//向下淡出
//检查是否有下级菜单
$(this).find('.nav-2').slideDown(100);
})
//移出的时候收起
$('.nav-1>li').mouseleave(function(){
//向上淡出
$(this).find('.nav-2').slideUp(100);
})
//再下一级
$('.nav-2>li').mouseover(function(){
$(this).find('.nav-3').slideDown(100);
})
$('.nav-2>li').mouseleave(function(){
$(this).find('.nav-3').slideUp(100);
})
})
</script>
</head>
<body>
<div>
<div>
<ul>
<li name="0"><a href="#">HTML</a>
<ul>
<li>第一章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第二章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第三章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第四章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第五章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
</ul>
</li>
<li name="1"><a href="#">CSS</a>
<ul>
<li>第一章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第二章
<ul>
<li>第一节</li>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第三章
<ul>
<li>第一节</li>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
</ul>
</li>
<li name="2"><a href="#">JavaScript</a>
<ul>
<li>第一章</li>
<li>第二章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第三章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
</ul>
</li>
<li name="3"><a href="#">Jquery</a>
<ul>
<li>第一章
<ul>
<li>第一节</li>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第二章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第三章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
</ul>
</li>
<li name="4"><a href="#">Bootstrap</a>
<ul>
<li>第一章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第二章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第三章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第四章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第五章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
</ul>
</li>
<li name="5"><a href="#">Vue</a>
<ul>
<li>第一章
</li>
<li>第二章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
<li>第三章
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
</li>
</ul>
</li>
</ul>
<div></div>
</div>
</div>
</body>
</html>首先获取元素，然后用.hover方法去切换；两个函数直接要用，号分割。定义一个变量去接收当前元素的值整型数。用parseInt(）方法获取整型数。
用获取数组，然后遍历数组去改变可以不老师？
感觉直接用Html的伪属性方便