三级下拉菜单
<!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>产品细节1</li>
<li>产品细节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>看了视频，隔了一天来写的作业，总体效果是实现了，就是结构方面感觉没有老师写的简洁，过两天再看视频重新再写几次