<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯css水平三级导航</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
@charset "UTF-8";
.box{
margin: 0 auto;
padding: 0px;
font-family:微软雅黑;
position:relative;
float:left;}
.box a{
color:white;
text-align:center;}
.box ul{
margin:0px;
padding:0px;
list-style:none;}
.box ul li{
width: 200px;
height:100px;
display: block;
background-color:#989e9c;}
.box ul li a:hover{
display:inline-block;
box-shadow: 0 0 18px #bec5c3;
}
.box ul li:hover ul{
display:block;}
.box ul li a{
font-size:19px;
width:200px;
height:100px;
line-height:100px;
display:block;
text-decoration:none;}
.box ul li ul{
display:none;
position:absolute;
top:0px;
left:200px;}
.box ul li ul li{
width: 200px;
height:100px;
padding:0px;
background-color:#c4c9c3;}
.box ul li ul li a:hover{
background-color:white;
color:#696969;}
.box ul li ul li ul li{
background:#FFFFFF;}
.box ul li ul li ul li:hover{
background:#AFEEEE;}
.box ul li ul li:hover ul{
visibility:visible;}
.box ul li ul li ul{
visibility:hidden;
position:absolute;
top:0px;
left:200px;}
.thirdh{background-color:#aab49c;}</style>
</head>
<body>
<!-- 编程导航 -->
<div class="box">
<ul><li><a href="#">一级导航1</a>
<ul><li><a href="#">二级导航1-1</a>
<ul><li><a href="#" class="thirdh">三级导航1_1_1</a></li>
<li><a href="#" class="thirdh">三级导航1_1_2</a></li>
<li><a href="#" class="thirdh">三级导航1_1_3</a></li>
<li><a href="#" class="thirdh">三级导航1_1_4</a></li>
</ul>
</li>
<li><a href="#">二级导航1-2</a>
<ul><li><a href="#" class="thirdh">三级导航1_2_1</a></li>
<li><a href="#" class="thirdh">三级导航1_2_2</a></li>
<li><a href="#" class="thirdh">三级导航1_2_3</a></li>
<li><a href="#" class="thirdh">三级导航1_2_4</a></li>
<li><a href="#" class="thirdh">三级导航1_2_5</a></li>
</ul>
</li>
<li><a href="#">二级导航1-3</a>
<ul><li><a href="#" class="thirdh">三级导航1_1_1</a></li>
<li><a href="#" class="thirdh">三级导航1_1_2</a></li>
<li><a href="#" class="thirdh">三级导航1_1_3</a></li>
</ul>
</li>
<li><a href="#">二级导航1-4</a>
<ul><li><a href="#" class="thirdh">三级导航1_4_1</a></li>
<li><a href="#" class="thirdh">三级导航1_4_2</a></li>
<li><a href="#" class="thirdh">三级导航1_4_3</a></li>
<li><a href="#" class="thirdh">三级导航1_4_4</a></li>
</ul>
</li>
<li><a href="#">二级导航1-5</a>
<ul><li><a href="#" class="thirdh">三级导航1_2_1</a></li>
<li><a href="#" class="thirdh">三级导航1_2_2</a></li>
<li><a href="#" class="thirdh">三级导航1_2_3</a></li>
<li><a href="#" class="thirdh">三级导航1_2_4</a></li>
<li><a href="#" class="thirdh">三级导航1_2_5</a></li>
</ul>
</li>
</ul>
</li>
<!-- 第二个一级导航 -->
<li><a href="#">一级导航2</a>
<ul><li><a href="#">二级导航2-1</a>
<ul><li><a href="#" class="thirdh">三级导航2_1_1</a></li>
<li><a href="#" class="thirdh">三级导航2_1_2</a></li>
<li><a href="#" class="thirdh">三级导航2_1_3</a></li>
<li><a href="#" class="thirdh">三级导航2_1_4</a></li>
</ul>
</li>
<li><a href="#">二级导航2-2</a>
<ul><li><a href="#" class="thirdh">三级导航2_2_1</a></li>
<li><a href="#" class="thirdh">三级导航2_2_2</a></li>
<li><a href="#" class="thirdh">三级导航2_2_3</a></li>
<li><a href="#" class="thirdh">三级导航2_2_4</a></li>
<li><a href="#" class="thirdh">三级导航2_2_5</a></li>
</ul>
</li>
<li><a href="#">二级导航2-3</a>
<ul><li><a href="#" class="thirdh">三级导航2_2_1</a></li>
<li><a href="#" class="thirdh">三级导航2_2_2</a></li>
<li><a href="#" class="thirdh">三级导航2_2_3</a></li>
</ul>
</li>
<li><a href="#">二级导航2-4</a>
<ul><li><a href="#" class="thirdh">三级导航2_4_1</a></li>
<li><a href="#" class="thirdh">三级导航2_4_2</a></li>
<li><a href="#" class="thirdh">三级导航2_4_3</a></li>
<li><a href="#" class="thirdh">三级导航2_4_4</a></li>
</ul>
</li>
<li><a href="#">二级导航2-5</a>
<ul><li><a href="#" class="thirdh">三级导航2_2_1</a></li>
<li><a href="#" class="thirdh">三级导航2_2_2</a></li>
<li><a href="#" class="thirdh">三级导航2_2_3</a></li>
<li><a href="#" class="thirdh">三级导航2_2_4</a></li>
<li><a href="#" class="thirdh">三级导航2_2_5</a></li>
</ul>
</li>
</ul>
</li>
<!-- 第三、四、五导航 -->
<li><a href="#">一级导航3</a>
<ul><li><a href="#">二级导航3-1</a>
</li>
<li><a href="#">二级导航3-2</a>
</li>
<li><a href="#">二级导航3-3</a>
</li>
<li><a href="#">二级导航3-4</a>
</li>
</ul>
</li>
<li><a href="#">一级导航4</a>
<ul><li><a href="#">二级导航4-1</a>
</li>
<li><a href="#">二级导航4-2</a>
</li>
<li><a href="#">二级导航4-3</a>
</li>
<li><a href="#">二级导航4-4</a>
</li>
</ul>
</li>
<li><a href="#">一级导航5</a>
<ul><li><a href="#">二级导航5-1</a>
</li>
<li><a href="#">二级导航5-2</a>
</li>
<li><a href="#">二级导航5-3</a>
</li>
<li><a href="#">二级导航5-4</a>
</li>
<li><a href="#">二级导航5-5</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- 编程导航结束 --><script>
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>纯css水平三级导航</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
@charset "UTF-8";
.box{
margin: 0 auto;
padding: 0px;
font-family:微软雅黑;
position:relative;
float:left;}
.box a{
color:white;
text-align:center;}
.box ul{
margin:0px;
padding:0px;
list-style:none;}
.box ul li{
width: 200px;
height:100px;
display: block;
background-color:#989e9c;}
.box ul li a:hover{
display:inline-block;
box-shadow: 0 0 18px #bec5c3;
}
.box ul li:hover ul{
display:block;}
.box ul li a{
font-size:19px;
width:200px;
height:100px;
line-height:100px;
display:block;
text-decoration:none;}
.box ul li ul{
display:none;
position:absolute;
top:0px;
left:200px;}
.box ul li ul li{
width: 200px;
height:100px;
padding:0px;
background-color:#c4c9c3;}
.box ul li ul li a:hover{
background-color:white;
color:#696969;}
.box ul li ul li ul li{
background:#FFFFFF;}
.box ul li ul li ul li:hover{
background:#AFEEEE;}
.box ul li ul li:hover ul{
visibility:visible;}
.box ul li ul li ul{
visibility:hidden;
position:absolute;
top:0px;
left:200px;}
.thirdh{background-color:#aab49c;}</style>
</head>
<body>
<!-- 编程导航 -->
<div class="box">
<ul><li><a href="#">一级导航1</a>
<ul><li><a href="#">二级导航1-1</a>
<ul><li><a href="#" class="thirdh">三级导航1_1_1</a></li>
<li><a href="#" class="thirdh">三级导航1_1_2</a></li>
<li><a href="#" class="thirdh">三级导航1_1_3</a></li>
<li><a href="#" class="thirdh">三级导航1_1_4</a></li>
</ul>
</li>
<li><a href="#">二级导航1-2</a>
<ul><li><a href="#" class="thirdh">三级导航1_2_1</a></li>
<li><a href="#" class="thirdh">三级导航1_2_2</a></li>
<li><a href="#" class="thirdh">三级导航1_2_3</a></li>
<li><a href="#" class="thirdh">三级导航1_2_4</a></li>
<li><a href="#" class="thirdh">三级导航1_2_5</a></li>
</ul>
</li>
<li><a href="#">二级导航1-3</a>
<ul><li><a href="#" class="thirdh">三级导航1_1_1</a></li>
<li><a href="#" class="thirdh">三级导航1_1_2</a></li>
<li><a href="#" class="thirdh">三级导航1_1_3</a></li>
</ul>
</li>
<li><a href="#">二级导航1-4</a>
<ul><li><a href="#" class="thirdh">三级导航1_4_1</a></li>
<li><a href="#" class="thirdh">三级导航1_4_2</a></li>
<li><a href="#" class="thirdh">三级导航1_4_3</a></li>
<li><a href="#" class="thirdh">三级导航1_4_4</a></li>
</ul>
</li>
<li><a href="#">二级导航1-5</a>
<ul><li><a href="#" class="thirdh">三级导航1_2_1</a></li>
<li><a href="#" class="thirdh">三级导航1_2_2</a></li>
<li><a href="#" class="thirdh">三级导航1_2_3</a></li>
<li><a href="#" class="thirdh">三级导航1_2_4</a></li>
<li><a href="#" class="thirdh">三级导航1_2_5</a></li>
</ul>
</li>
</ul>
</li>
<!-- 第二个一级导航 -->
<li><a href="#">一级导航2</a>
<ul><li><a href="#">二级导航2-1</a>
<ul><li><a href="#" class="thirdh">三级导航2_1_1</a></li>
<li><a href="#" class="thirdh">三级导航2_1_2</a></li>
<li><a href="#" class="thirdh">三级导航2_1_3</a></li>
<li><a href="#" class="thirdh">三级导航2_1_4</a></li>
</ul>
</li>
<li><a href="#">二级导航2-2</a>
<ul><li><a href="#" class="thirdh">三级导航2_2_1</a></li>
<li><a href="#" class="thirdh">三级导航2_2_2</a></li>
<li><a href="#" class="thirdh">三级导航2_2_3</a></li>
<li><a href="#" class="thirdh">三级导航2_2_4</a></li>
<li><a href="#" class="thirdh">三级导航2_2_5</a></li>
</ul>
</li>
<li><a href="#">二级导航2-3</a>
<ul><li><a href="#" class="thirdh">三级导航2_2_1</a></li>
<li><a href="#" class="thirdh">三级导航2_2_2</a></li>
<li><a href="#" class="thirdh">三级导航2_2_3</a></li>
</ul>
</li>
<li><a href="#">二级导航2-4</a>
<ul><li><a href="#" class="thirdh">三级导航2_4_1</a></li>
<li><a href="#" class="thirdh">三级导航2_4_2</a></li>
<li><a href="#" class="thirdh">三级导航2_4_3</a></li>
<li><a href="#" class="thirdh">三级导航2_4_4</a></li>
</ul>
</li>
<li><a href="#">二级导航2-5</a>
<ul><li><a href="#" class="thirdh">三级导航2_2_1</a></li>
<li><a href="#" class="thirdh">三级导航2_2_2</a></li>
<li><a href="#" class="thirdh">三级导航2_2_3</a></li>
<li><a href="#" class="thirdh">三级导航2_2_4</a></li>
<li><a href="#" class="thirdh">三级导航2_2_5</a></li>
</ul>
</li>
</ul>
</li>
<!-- 第三、四、五导航 -->
<li><a href="#">一级导航3</a>
<ul><li><a href="#">二级导航3-1</a>
</li>
<li><a href="#">二级导航3-2</a>
</li>
<li><a href="#">二级导航3-3</a>
</li>
<li><a href="#">二级导航3-4</a>
</li>
</ul>
</li>
<li><a href="#">一级导航4</a>
<ul><li><a href="#">二级导航4-1</a>
</li>
<li><a href="#">二级导航4-2</a>
</li>
<li><a href="#">二级导航4-3</a>
</li>
<li><a href="#">二级导航4-4</a>
</li>
</ul>
</li>
<li><a href="#">一级导航5</a>
<ul><li><a href="#">二级导航5-1</a>
</li>
<li><a href="#">二级导航5-2</a>
</li>
<li><a href="#">二级导航5-3</a>
</li>
<li><a href="#">二级导航5-4</a>
</li>
<li><a href="#">二级导航5-5</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- 编程导航结束 --><script>
</script>
</body>
</html>