abstract：<!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实现显示隐藏动画效果注释这行*/
/*.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实现显示隐藏动画效果注释这行*/
/*.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="">清洁卫生</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>
Correcting teacher：查无此人Correction time：2019-05-21 09:13:08
Teacher's summary：完成的不错。三级菜单这个效果，项目中基本都有。继续加油