abstrakt：<!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>數(shù)學</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>數(shù)學</li>
<li>英語</li>
</ul>
</li>
<li>五年級</li>
<li>六年級</li>
</ul>
</li>
<li id="3">課外
<ul class="ul2">
<li>音樂</li>
<li>美術(shù)</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)
//必須將下劃線作為一個獨立的元素，并設(shè)置絕對位置，父元素設(shè)置相對位置
})
$('.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>
總結(jié)：比添加下邊框樣式繁瑣些。
Korrigierender Lehrer：韋小寶Korrekturzeit：2019-02-11 09:16:03
Zusammenfassung des Lehrers：寫的很不錯 這些肯定要比直接添加下邊框要繁瑣點 這里需要獲取當前鼠標所在的位置并給出變化??！