abstract：<!DOCTYPE html><html><head> <meta charset="UTF-8"/> <title>庄稼汉</title> <style> * {
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>庄稼汉</title>
<style>
* {
margin: 0;
padding: 0;
}
body,
html {
font-size: 14px;
font-family: 'Microsoft Yahei', '微软雅黑', 'Simsun', '宋体', 'Arial', sans-serif;
}
img {
border: 0;
}
a {
color: #fff;
text-decoration: none;
outline: none;
}
ol,
ul,
li {
list-style: none;
}
.head-nav {
width: 100%;
height: 60px;
background: #007130;
}
.head-nav-con {
width: 1200px;
height: 60px;
margin: auto;
}
.head-nav-con ul li {
width: 170px;
float: left;
font-size: 20px;
text-align: center;
}
.head-nav-con ul li:hover {
background: #ff9c01;
}
.head-nav-con ul a {
display: block;
text-decoration: none;
text-align: center;
line-height: 60px;
color: white;
}
.head-nav-con .drop-down {
position: relative;
}
.head-nav-con .drop-down-content {
padding: 0;
display: none;
position: absolute;
z-index: 1;
background: #007130;
}
.head-nav-con .drop-down-content li:hover > a {
background-color: #ff9c01;
}
.head-nav-con .drop-down:hover .drop-down-content {
display: block;
}
.head-nav-con .drop-down-2 {
position: relative;
}
.head-nav-con .drop-down-content-2 {
padding: 0;
display: none;
position: absolute;
z-index: 1;
background-color: #007130;
right: -170px;
top: 0;
}
.head-nav-con .drop-down-content-2 > li {
float: none;
background-color: #007130;
}
.head-nav-con .drop-down-content-2 li:hover a {
background-color: #ff9c01;
}
.head-nav-con .drop-down-2:hover .drop-down-content-2 {
display: block;
}
</style>
</head>
<body>
<div>
<!--头部-->
<div>
<div>
<div class="head-nav-con clearFloat">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">一级菜单</a></li>
<li><a href="#">二级菜单</a>
<ul>
<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>
<li><a href="#">三级菜单</a>
<ul>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
</ul>
</li>
<li><a href="#">三级菜单</a>
<ul>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
</ul>
</li>
<li class=""><a href="#">二级菜单</a></li>
<li class=""><a href="#">二级菜单</a></li>
<li class=""><a href="#">二级菜单</a></li>
<li class=""><a href="#">二级菜单</a></li>
<li><a href="#">三级菜单</a>
<ul>
<li><a href="#">二级菜单</a></li>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">一级菜单</a></li>
<li><a href="#">一级菜单</a></li>
<li><a href="#">一级菜单</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
---------------------
作者：后生丶
来源：CSDN
原文：https://blog.csdn.net/qq_30449567/article/details/80548720
版权声明：本文为博主原创文章，转载请附上博文链接！
Correcting teacher：天蓬老师Correction time：2019-04-12 15:40:37
Teacher's summary：* {
margin: 0;
padding: 0;
}
其实你的页面元素并不多, 直接指定要重置的标签名, 效率更高