摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{ margin: 0px; padding: 0px;}
body{ font-size: 12px;}
.top{ width: 980px; margin: 0 auto; background: #000;height: 36px; line-height: 36px;}
.aa{ float:left; width: 80px; text-align: center; border-left: 1px solid #999; position: relative;}
.bb{position: absolute; width: 80px; background: #000; display: none;}
.aa:hover .bb{display: block;}
.cc{ width: 80px; background: #000; position: absolute; left: 80px; top: 0px; display: none}
.pp{ position: relative;}
.pp:hover .cc{ display: block;}
li{ list-style: none;}
a{ color: #fff; text-decoration: none;}
</style>
</head>
<body>
<div class="top">
<ul>
<li class="aa"><a href="#">首页</a></li>
<li class="aa"><a href="#">产品</a>
<ul class="bb">
<li class="pp"><a href="#">产品1</a>
<ul class="cc">
<li><a href="#">产品111</a></li>
<li><a href="#">产品2221</a></li>
<li><a href="#">产品1333</a></li>
</ul>
</li>
<li><a href="#">产品2</a></li>
<li><a href="#">产品3</a></li>
<li class="pp"><a href="#">产品4</a>
<ul class="cc">
<li><a href="#">产品111</a></li>
<li><a href="#">产品2221</a></li>
<li><a href="#">产品1333</a></li>
</ul></li>
</ul>
</li>
<li class="aa"><a href="#">公司新闻</a></li>
<li class="aa"><a href="#">行业新闻</a></li>
<li class="aa"><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>
批改老师：灭绝师太批改时间：2019-02-16 09:07:42
老师总结：代码思路清晰,布局没有问题,但是取class名的时候要注意规范一点
