<!DOCTYPE html>
<html lang="en">
<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;
}
.head-nav-con {
width: 100%;
height: 60px;
background: #39b97d;
}
.head-nav-con ul {
list-style: none;
cursor: pointer;
}
.head-nav-con ul li {
width: 170px;
float: left;
}
.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:hover .drop-down-content {
display: block;
}
.head-nav-con .drop-down-content {
display: none;
position: absolute;
z-index: 1;
background: #007130;
}
.head-nav-con .drop-down-content li:hover {
background-color: #17c8b9;
}
.head-nav-con .drop-down-2 {
position: relative;
}
.head-nav-con .drop-down-2:hover .drop-down-content-2 {
display: block;
}
.head-nav-con .drop-down-content-2 {
display: none;
position: absolute;
left: 170px;
top: 0;
z-index: 1;
background-color: #7b1fbe94;
}
.head-nav-con .drop-down-content-2 li {
float: none;
margin-bottom: 5px;
background-color: #da283a;
}
.head-nav-con .drop-down-content-2 li:hover {
background-color: #17c86a;
}
</style>
</head>
<body>
<div class="head-nav-con">
<ul>
<li><a>首页</a></li>
<li><a>一级菜单</a></li>
<li class="drop-down">
<a>二级菜单~</a>
<ul class="drop-down-content">
<li><a>二级菜单</a></li>
<li><a>二级菜单</a></li>
</ul>
</li>
<li class="drop-down">
<a>二级菜单</a>
<ul class="drop-down-content">
<li><a>二级菜单</a></li>
<li class="drop-down-2">
<a>三级菜单</a>
<ul class="drop-down-content-2">
<li><a>二级菜单</a></li>
<li><a>二级菜单</a></li>
</ul>
</li>
<li class="drop-down-2">
<a>三级菜单</a>
<ul class="drop-down-content-2">
<li><a>三级菜单</a></li>
<li><a>三级菜单</a></li>
<li><a>三级菜单</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>