摘要：<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>自學導航條菜單</ti
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>自學導航條菜單</title>
<style>
*{padding: 0;list-style: none;text-align: center;}
/*.wrap{width: 100%;height: 60px;!*background-color: black;*!}*/
.wrap a{text-decoration: none;color: black;}
.wrap a:hover{color: #ffc09f;}
.wrap .box1{width: 1000px;height: 60px;margin: 0 auto;background-color: lightseagreen;border-radius: 5px;}
/*一層菜單*/
.box1>li{float: left;width: 100px;height: 60px;line-height: 60px;}
.box1>li:hover{background-color: lightgreen;}
/*如果要用javaScript或者jQuery實現(xiàn)顯示隱藏動畫效果注釋這行*/
/*.box1>li:hover>.box2{display: block;}*/
/*二層菜單*/
.box2{background-color: lightseagreen;position: relative;top: 2px}
/*.box2>li{border-bottom: 1px solid grey}*/
.box2>li:hover{background-color: lightgreen;}
/*如果要用javaScript或者jQuery實現(xiàn)顯示隱藏動畫效果注釋這行*/
/*.box2>li:hover>.box3{display: block;}*/
/*設置2級菜單和3級菜單里面的li寬度 能達到相對定位后3級菜單不占用2級菜單li的位置 實際測試只需要設置2級菜單即可*/
.box2>li/*,.box3>li*/{width: 100px;height: 60px;}
/*三層菜單*/
.box3{background-color: lightseagreen;position: relative;left: 102px;top: -60px;}
/*.box3>li{width: 100px;height: 60px;margin-left: 5px;}*/
.box3>li:hover{background-color: lightgreen;}
/*隱藏子級菜單*/
.box2,.box3{display: none}
</style>
</head>
<body>
<div class="wrap">
<ul class="box1">
<li><a href="">電器</a>
<ul class="box2">
<li><a href="">電腦</a>
<ul class="box3">
<li><a href="">臺式機</a></li>
<li><a href="">筆記本</a></li>
<li><a href="">平板電腦</a></li>
</ul>
</li>
<li><a href="">手機</a>
<ul class="box3">
<li><a href="">蘋果手機</a></li>
<li><a href="">華為手機</a></li>
<li><a href="">小米手機</a></li>
<li><a href="">三星手機</a></li>
</ul>
</li>
<li><a href="">家用</a>
<ul class="box3">
<li><a href="">廚具餐具</a></li>
<li><a href="">清潔衛(wèi)生</a></li>
<li><a href="">床上用品</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">服飾</a>
<ul class="box2">
<li><a href="">男裝</a>
<ul class="box3">
<li><a href="">新款展示</a></li>
<li><a href="">運動休閑</a></li>
<li><a href="">商務男裝</a></li>
</ul>
</li>
<li><a href="">女裝</a>
<ul class="box3">
<li><a href="">新品款</a></li>
<li><a href="">爆紅款</a></li>
<li><a href="">明星款</a></li>
</ul>
</li>
<li><a href="">童裝</a>
<ul class="box3">
<li><a href="">女孩</a></li>
<li><a href="">男孩</a></li>
<li><a href="">嬰兒</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">食品</a>
<ul class="box2">
<li><a href="">零食</a>
<ul class="box3">
<li><a href="">油炸類</a></li>
<li><a href="">膨化類</a></li>
<li><a href="">面食類</a></li>
</ul>
</li>
<li><a href="">飲品</a>
<ul class="box3">
<li><a href="">牛奶酸奶</a></li>
<li><a href="">功能飲料</a></li>
<li><a href="">碳酸飲料</a></li>
</ul>
</li>
<li><a href="">生鮮</a>
<ul class="box3">
<li><a href="">輕海鮮</a></li>
<li><a href="">野生魚</a></li>
<li><a href="">活龍蝦</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">玩具</a>
<ul class="box2">
<li><a href="">成人玩具</a></li>
<li><a href="">兒童玩具</a></li>
<li><a href="">嬰兒玩具</a></li>
</ul>
</li>
<li><a href="">家具</a>
<ul class="box2">
<li><a href="">成品類</a></li>
<li><a href="">定制類</a></li>
<li><a href="">進口類</a></li>
</ul>
</li>
</ul>
</div>
<script src="jquery-3.4.0.js"></script>
<script>
// 二級菜單樣式
$(".box1>li").hover(function(){
$(this).children("ul").slideToggle(300);
},function () {
$(this).children("ul").slideToggle(300);
});
// 三級菜單樣式
$(".box2>li").hover(function(){
$(this).children("ul").toggle(300);
},function () {
$(this).children("ul").toggle(300);
});
</script>
</body>
</html>
批改老師：查無此人批改時間：2019-05-21 09:13:08
老師總結：完成的不錯。三級菜單這個效果，項目中基本都有。繼續(xù)加油