摘要：<!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
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接！
批改老師：天蓬老師批改時間：2019-04-12 15:40:37
老師總結(jié)：* {
margin: 0;
padding: 0;
}
其實你的頁面元素并不多, 直接指定要重置的標簽名, 效率更高