摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<style>
*{margin:0px;padding:0px;}
li{list-style-type: none;color:mintcream;background-color: mediumpurple;}
.ul1 li{float:left;width:80px;height:40px;text-align:center;line-height: 40px;font-size:15px;}
.ul2{margin:5px 0;}
.ul3 li{position:relative;left:80px;top:-40px;}
li:hover{background-color:orchid;}
.bb{border:5px solid purple;}
.bb1{position:absolute;top:40px;}
a{display:block;width:40px;height: 40px;box-shadow: 0 0 10px;border-radius:50%;float:left;margin:30px;
text-align: center;line-height: 40px;text-decoration: none;}
</style>
</head>
<body>
<nav style="margin:0 auto;width:60%;height:40px;background-color: #f5f5f5;position: relative;">
<ul class="ul1">
<li id="0">首页</li>
<li id="1">学习
<ul class="ul2">
<li>一年级</li>
<li>二年级</li>
<li>三年级</li>
<li>四年级
<ul class="ul3">
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ul>
</li>
<li>五年级</li>
<li>六年级</li>
</ul>
</li>
<li id="2">测试
<ul class="ul2">
<li>一年级</li>
<li>二年级</li>
<li>三年级</li>
<li>四年级
<ul class="ul3">
<li>语文</li>
<li>数学</li>
<li>英语</li>
</ul>
</li>
<li>五年级</li>
<li>六年级</li>
</ul>
</li>
<li id="3">课外
<ul class="ul2">
<li>音乐</li>
<li>美术</li>
<li>信息</li>
<li>体育</li>
</ul>
</li>
</ul>
<div style="clear:both;"></div>
<div class="bb1" style="width:80px;z-index:10;height:5px;background-color:purple;"></div>
</nav>
<main style="margin:5px auto;width:60%;height:400px;background-color: #f5f5f5;">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<div style="clear:both;"></div>
<button style="width:80px;height:40px;">tap</button>
</main>
<script>
$(document).ready(function(){
$('.ul2').hide();
$('.ul3').hide();
$('.ul1>li').mouseover(function(){
$(this).find('.ul2').slideDown(100)
//$(this).addClass('bb')
$x=parseInt($(this).attr('id'))*80
$('.bb1').stop().animate({left:$x+'px'},100)
//必须将下划线作为一个独立的元素，并设置绝对位置，父元素设置相对位置
})
$('.ul1>li').mouseleave(function(){
$(this).find('.ul2').slideUp(100)
//$(this).removeClass('bb')
$('.bb1').stop().animate({left:'0px'},100)
})
$('.ul2>li').mouseover(function(){
$(this).find('.ul3').slideDown(100)
})
$('.ul2>li').mouseleave(function(){
$(this).find('.ul3').slideUp(100)
})
var n1=0
$('button').click(function(){
var a1=document.querySelectorAll('a')
for (var i=0;i<a1.length;i++){
a1[i].style.backgroundColor='rgb('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+')'
a1[i].innerHTML=Math.floor(Math.random()*100)
}
})
})
</script>
</body>
</html>
总结：比添加下边框样式繁琐些。
批改老师：韦小宝批改时间：2019-02-11 09:16:03
老师总结：写的很不错 这些肯定要比直接添加下边框要繁琐点 这里需要获取当前鼠标所在的位置并给出变化啊！
