abstrakt：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> &
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三級導航</title>
<style type="text/css">
.box{width: 600px;height: 32px;margin: 0px auto;}
.one li{list-style: none;width: 100px;height: 30px;border:1px solid #ccc;text-align: center;background-color: #181818;line-height: 28px;color: white;cursor: pointer;}
.one li:hover{background-color: #ccc;}
.one>li{display: inline-block;position: relative;}
.two{float: left;position: absolute;left: -41px;top: 31px;display: none;}
.three{float: left;position: absolute;left: 102px;top: 32px;display: none;}
</style>
</head>
<body>
<div class="box">
<ul class="one">
<li>首頁</li>
<li>公司介紹</li>
<li id="chanpin1">產品介紹
<ul class="two">
<li>產品介紹1</li>
<li id="chanpin2">產品介紹2
<ul class="three">
<li>產品細節(jié)1</li>
<li>產品細節(jié)2</li>
</ul>
</li>
<li>產品介紹3</li>
<li>產品介紹4</li>
<li>產品介紹5</li>
</ul>
</li>
<li>品牌故事</li>
<li>聯系我們</li>
</ul>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$('#chanpin1').mouseenter(function(){
$('.two').css('display','block');
});
$('#chanpin1').mouseleave(function(){
$('.two').css('display','none');
});
$('#chanpin2').mouseenter(function(){
$('.three').css('display','block');
});
$('#chanpin2').mouseleave(function(){
$('.three').css('display','none');
});
});
</script>
</body>
</html>看了視頻，隔了一天來寫的作業(yè)，總體效果是實現了，就是結構方面感覺沒有老師寫的簡潔，過兩天再看視頻重新再寫幾次
Korrigierender Lehrer：滅絕師太Korrekturzeit：2018-11-08 16:44:29
Zusammenfassung des Lehrers：布局條理很清晰，可以都嘗試寫幾次，最好是完全自己寫的，加深記憶