摘要：之前作这种下拉菜单式的都是用js实现的。今天看视频讲到用css作，也就跟着老师的思路作了一下，代码比用js写的代码少很多。页面便于加载。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> &
之前作这种下拉菜单式的都是用js实现的。今天看视频讲到用css作，也就跟着老师的思路作了一下，代码比用js写的代码少很多。页面便于加载。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*,body{margin: 0;padding:0}
a{text-decoration:none}
li{list-style: none}
.nav{width: 100%;background-color:#FF8700;margin-top:120px;}
.nav_content{width:1190px;height:30px;margin: 0 auto;}
.nav_content li{float: left;list-style: none;margin: 0 10px;line-height: 30px;}
.nav_content li a{color: white;}
.nav_content .hover{background-color:#FF5000;text-align:center;width: 190px;}
.zhuti ul{display:none;width:100%;cursor:pointer;background-color: red;height:300px;}
.zhuti ul li{float:none}
.zhuti:hover ul{display:block}
</style>
</head>
<body>
<div class="nav">
<div class="nav_content">
<ul>
<li class="hover zhuti"><a href="#">主题市场</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
<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></li>
<li><a href="#">聚划算</a></li>
<li><a href="#">天猫超市</a></li>
<li><a href="#">淘抢购</a></li>
<li><a href="#">电器城</a></li>
<li><a href="#">司法拍卖</a></li>
<li><a href="#">淘宝心选</a></li>
<li><a href="#">兴农扶贫</a></li>
<li><a href="#">飞猪旅行</a></li>
<li><a href="#">智能生活</a></li>
<li><a href="#">苏宁易购</a></li>
</ul>
</div>
</div>
</body>
</html>
批改老师：韦小宝批改时间：2019-01-05 09:05:54
老师总结：写的很不错！下拉菜单在日常的开发中还是很常见！使用当然也是比较频繁的！
