摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> &
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三級(jí)導(dǎo)航</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>首頁(yè)</li>
<li>公司介紹</li>
<li id="chanpin1">產(chǎn)品介紹
<ul class="two">
<li>產(chǎn)品介紹1</li>
<li id="chanpin2">產(chǎn)品介紹2
<ul class="three">
<li>產(chǎn)品細(xì)節(jié)1</li>
<li>產(chǎn)品細(xì)節(jié)2</li>
</ul>
</li>
<li>產(chǎn)品介紹3</li>
<li>產(chǎn)品介紹4</li>
<li>產(chǎn)品介紹5</li>
</ul>
</li>
<li>品牌故事</li>
<li>聯(lián)系我們</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è)，總體效果是實(shí)現(xiàn)了，就是結(jié)構(gòu)方面感覺沒有老師寫的簡(jiǎn)潔，過兩天再看視頻重新再寫幾次
批改老師：滅絕師太批改時(shí)間：2018-11-08 16:44:29
老師總結(jié)：布局條理很清晰，可以都嘗試寫幾次，最好是完全自己寫的，加深記憶