解说垂直三级导航

垂直导航这种东西很常见，某宝某东等等，都采用了这样的导航。

很多人使用js脚本写这个，麻烦。今天呢，我用css3做一下。

（css3这个东西，真的好强大啊）

先看图

                                                                                              

当鼠标移动上去，逐步打开，这就是效果啦。

ok，上代码

<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			font-family: "微软雅黑";
		}

		ul{
			list-style: none;
			background: #777;
		}

		.nav2{
			padding: 0;
		}

		.nav3{
			padding: 0;
		}
		
		
		.nav1{
			margin: 100px 0 0 100px; 
			padding: 0;
		}

/*设置a标签的属性  区块，宽高，下划线删除，改变默认颜色*/
		.nav1 a{
			display: block;
			width: 100px;
			height: 36px;
			line-height: 36px;
			text-decoration: none;
			color: #fff;
			text-align: center;
		}

		.nav1 a:hover{
			background: #ffaaaa;
			color: #000;
			transition: all 1s;
		}


		.nav1 li{
			position: relative;
		}

		li{
			text-align: center;
		}

		.nav1{
			width: 110px;
		}

		.nav1 a{
			width: 110px;
		}
/*悬浮不同的nav中的li 设置不同颜色*/
		.li1:hover{
			background: #999;
		}

		.li2:hover{
			background: #bbb;
		}

		.li3:hover{
			background: #aaa;
		}
/*	设置绝对定位 从nav1的ul开始，相对定位是nav中的li，也就是ul的父级元素
	因为nav1的宽度是110px;所以想让nav1下的ul紧贴nav1，设置left110-px,最好是 110px;
	并且设置子元素隐藏
*/

		.nav1 ul{
			position: absolute;
			left: 109px;
			top:0;
			display: none;
		}

/*就是当鼠标悬浮在li1 上面的时候，让他子元素中的 nav2 显示可见  当鼠标悬浮在nv2中的li2 上面的时候，则让他子元素中的 nav3 显示可见*/
		.li1:hover .nav2{
			background: #999;
			display: block;
		}

		.li2:hover .nav3{
			background: #bbb;
			display: block;
		}

/*单独设置每个nav 下的a 的宽度，以及nav 的绝对定位，*/
		.haizei .li2>a{
			width:110px;
		}

		.haizei .li3>a{
			width:120px;
		}

		.quanyecha .li2>a{
			width: 130px;
		}

		.quanyecha .nav3{
			left: 130px;
		}

		.quanyecha .li3>a{
			width: 140px;
		}

		.huoying .li2>a{
			width: 140px;
		}

		.huoying .li3>a{
			width: 150px;
		}

		.huoying .nav3{
			left: 140px;
		}


		.shumabaobei .li2>a{
			width: 150px;
		}

		.shumabaobei .nav3{
			left: 150px;
		}

		.shumabaobei .li3>a{
			width: 160px;
		}

		.sishen .li2>a{
			width: 120px;
		}

		.sishen .nav3{
			left: 120px;
		}
		
		.sishen .li3>a{
			width: 120px;
		}

	</style>

这就是css的部分了。

接下来是主体，继续上代码

<div class="nav">
	
		<ul class="nav1">
		<li class="li1 haizei"><a href="">海贼王</a>
				<ul class="nav2">
					<li class="li2"><a href="">你好，海贼</a>
						<ul class="nav3">
							<li class="li3"><a href="">你好，海贼</a></li>
							<li class="li3"><a href="">你好，海贼</a></li>
							<li class="li3"><a href="">你好，海贼</a></li>
							<li class="li3"><a href="">你好，海贼</a></li>
							<li class="li3"><a href="">你好，海贼</a></li>
						</ul>
					</li>

					<li class="li2"><a href="">你好，海贼1</a>
						<ul class="nav3">
							<li class="li3"><a href="">你好，海贼1</a></li>
							<li class="li3"><a href="">你好，海贼1</a></li>
							<li class="li3"><a href="">你好，海贼1</a></li>
							<li class="li3"><a href="">你好，海贼1</a></li>
							<li class="li3"><a href="">你好，海贼1</a></li>
						</ul>
					</li>

					<li class="li2"><a href="">你好，海贼2</a>
						<ul class="nav3">
							<li class="li3"><a href="">你好，海贼2</a></li>
							<li class="li3"><a href="">你好，海贼2</a></li>
							<li class="li3"><a href="">你好，海贼2</a></li>
							<li class="li3"><a href="">你好，海贼2</a></li>
							<li class="li3"><a href="">你好，海贼2</a></li>
						</ul>
					</li>

					<li class="li2"><a href="">你好，海贼3</a>
						<ul class="nav3">
							<li class="li3"><a href="">你好，海贼3</a></li>
							<li class="li3"><a href="">你好，海贼3</a></li>
							<li class="li3"><a href="">你好，海贼3</a></li>
							<li class="li3"><a href="">你好，海贼3</a></li>
							<li class="li3"><a href="">你好，海贼3</a></li>
						</ul>
					</li>

					<li class="li2"><a href="">你好，海贼4</a>
						<ul class="nav3">
							<li class="li3"><a href="">你好，海贼4</a></li>
							<li class="li3"><a href="">你好，海贼4</a></li>
							<li class="li3"><a href="">你好，海贼4</a></li>
							<li class="li3"><a href="">你好，海贼4</a></li>
							<li class="li3"><a href="">你好，海贼4</a></li>
						</ul>
					</li>
				</ul>				
			</li>

			<li class="li1 quanyecha"><a href="">犬夜叉</a>
				<ul class="nav2">
					<li class="li2"><a href="">你好，犬夜叉</a>
						<ul class="nav3">
							<li class="li3"><a href="">你好，犬夜叉</a></li>
							<li class="li3"><a href="">你好，犬夜叉</a></li>
							<li class="li3"><a href="">你好，犬夜叉</a></li>
							<li class="li3"><a href="">你好，犬夜叉</a></li>
							<li class="li3"><a href="">你好，犬夜叉</a></li>
						</ul>
					</li>

					<li class="li2"><a href="">你好，犬夜叉1</a>
						<ul class="nav3">
							<li class="li3"><a href="">你好，犬夜叉1</a></li>
							<li class="li3"><a href="">你好，犬夜叉1</a></li>
							<li class="li3"><a href="">你好，犬夜叉1</a></li>
							<li class="li3"><a href="">你好，犬夜叉1</a></li>
							<li class="li3"><a href="">你好，犬夜叉1</a></li>
						</ul>
					</li>

					<li class="li2"><a href="">你好，犬夜叉2</a>
						<ul class="nav3">
							<li class="li3"><a href="">你好，犬夜叉2</a></li>
							<li class="li3"><a href="">你好，犬夜叉2</a></li>
							<li class="li3"><a href="">你好，犬夜叉2</a></li>
							<li class="li3"><a href="">你好，犬夜叉2</a></li>
							<li class="li3"><a href="">你好，犬夜叉2</a></li>
						</ul>
					</li>

					<li class="li2"><a href="">你好，犬夜叉3</a>
						<ul class="nav3">
							<li class="li3"><a href="">你好，犬夜叉3</a></li>
							<li class="li3"><a href="">你好，犬夜叉3</a></li>
							<li class="li3"><a href="">你好，犬夜叉3</a></li>
							<li class="li3"><a href="">你好，犬夜叉3</a></li>
							<li class="li3"><a href="">你好，犬夜叉3</a></li>
						</ul>
					</li>

					<li class="li2"><a href="">你好，犬夜叉4</a>
						<ul class="nav3">
							<li class="li3"><a href="">你好，犬夜叉4</a></li>
							<li class="li3"><a href="">你好，犬夜叉4</a></li>
							<li class="li3"><a href="">你好，犬夜叉4</a></li>
							<li class="li3"><a href="">你好，犬夜叉4</a></li>
							<li class="li3"><a href="">你好，犬夜叉4</a></li>
						</ul>
					</li>

				</ul>
			</li>

			<li class="li1 huoying"><a href="">火影忍者</a>
				<ul class="nav2">
					<li class="li2"><a href="">你好，火影忍者</a>
						<ul class="nav3">
							<li class="li3"><a href="">你好，火影忍者</a></li>
							<li class="li3"><a href="">你好，火影忍者</a></li>
							<li class="li3"><a href="">你好，火影忍者</a></li>
							<li class="li3"><a href="">你好，火影忍者</a></li>
							<li class="li3"><a href="">你好，火影忍者</a></li>
						</ul>
					</li>

					<li class="li2"><a href="">你好，火影忍者1</a>
						<ul class="nav3">
							<li class="li3"><a href="">你好，火影忍者1</a></li>
							<li class="li3"><a href="">你好，火影忍者1</a></li>
							<li class="li3"><a href="">你好，火影忍者1</a></li>
							<li class="li3"><a href="">你好，火影忍者1</a></li>
							<li class="li3"><a href="">你好，火影忍者1</a></li>
						</ul>
					</li>

					<li class="li2"><a href="">你好，火影忍者2</a>
						<ul class="nav3">
							<li class="li3"><a href="">你好，火影忍者2</a></li>
							<li class="li3"><a href="">你好，火影忍者2</a></li>
							<li class="li3"><a href="">你好，火影忍者2</a></li>
							<li class="li3"><a href="">你好，火影忍者2</a></li>
							<li class="li3"><a href="">你好，火影忍者2</a></li>
						</ul>
					</li>

					<li class="li2"><a href="">你好，火影忍者3</a>
						<ul class="nav3">
							<li class="li3"><a href="">你好，火影忍者3</a></li>
							<li class="li3"><a href="">你好，火影忍者3</a></li>
							<li class="li3"><a href="">你好，火影忍者3</a></li>
							<li class="li3"><a href="">你好，火影忍者3</a></li>
							<li class="li3"><a href="">你好，火影忍者3</a></li>
						</ul>
					</li>

					<li class="li2"><a href="">你好，火影忍者4</a>
						<ul class="nav3">
							<li class="li3"><a href="">你好，火影忍者4</a></li>
							<li class="li3"><a href="">你好，火影忍者4</a></li>
							<li class="li3"><a href="">你好，火影忍者4</a></li>
							<li class="li3"><a href="">你好，火影忍者4</a></li>
							<li class="li3"><a href="">你好，火影忍者4</a></li>
						</ul>
					</li>

				</ul>
			</li>


			<li class="li1 shumabaobei"><a href="">数码宝贝</a>
				<ul class="nav2">
					<li class="li2"><a href="">你好，数码宝贝</a>
						<ul class="nav3">
							<li class="li3"><a href="">你好，数码宝贝</a></li>
							<li class="li3"><a href="">你好，数码宝贝</a></li>
							<li class="li3"><a href="">你好，数码宝贝</a></li>
							<li class="li3"><a href="">你好，数码宝贝</a></li>
							<li class="li3"><a href="">你好，数码宝贝</a></li>
						</ul>
					</li>

					<li class="li2"><a href="">你好，数码宝贝1</a>
						<ul class="nav3">
							<li class="li3"><a href="">你好，数码宝贝1</a></li>
							<li class="li3"><a href="">你好，数码宝贝1</a></li>
							<li class="li3"><a href="">你好，数码宝贝1</a></li>
							<li class="li3"><a href="">你好，数码宝贝1</a></li>
							<li class="li3"><a href="">你好，数码宝贝1</a></li>
						</ul>
					</li>

					<li class="li2"><a href="">你好，数码宝贝2</a>
						<ul class="nav3">
							<li class="li3"><a href="">你好，数码宝贝2</a></li>
							<li class="li3"><a href="">你好，数码宝贝2</a></li>
							<li class="li3"><a href="">你好，数码宝贝2</a></li>
							<li class="li3"><a href="">你好，数码宝贝2</a></li>
							<li class="li3"><a href="">你好，数码宝贝2</a></li>
						</ul>
					</li>

					<li class="li2"><a href="">你好，数码宝贝3</a>
						<ul class="nav3">
							<li class="li3"><a href="">你好，数码宝贝3</a></li>
							<li class="li3"><a href="">你好，数码宝贝3</a></li>
							<li class="li3"><a href="">你好，数码宝贝3</a></li>
							<li class="li3"><a href="">你好，数码宝贝3</a></li>
							<li class="li3"><a href="">你好，数码宝贝3</a></li>
						</ul>
					</li>

					<li class="li2"><a href="">你好，数码宝贝4</a>
						<ul class="nav3">
							<li class="li3"><a href="">你好，数码宝贝4</a></li>
							<li class="li3"><a href="">你好，数码宝贝4</a></li>
							<li class="li3"><a href="">你好，数码宝贝4</a></li>
							<li class="li3"><a href="">你好，数码宝贝4</a></li>
							<li class="li3"><a href="">你好，数码宝贝4</a></li>
						</ul>
					</li>

				</ul>
			</li>


			<li class="li1 sishen"><a href="">死神</a>
				<ul class="nav2">
					<li class="li2"><a href="">你好，死神</a>
						<ul class="nav3">
							<li class="li3"><a href="">你好，死神</a></li>
							<li class="li3"><a href="">你好，死神</a></li>
							<li class="li3"><a href="">你好，死神</a></li>
							<li class="li3"><a href="">你好，死神</a></li>
							<li class="li3"><a href="">你好，死神</a></li>
						</ul>
					</li>

					<li class="li2"><a href="">你好，死神1</a>
						<ul class="nav3">
							<li class="li3"><a href="">你好，死神1</a></li>
							<li class="li3"><a href="">你好，死神1</a></li>
							<li class="li3"><a href="">你好，死神1</a></li>
							<li class="li3"><a href="">你好，死神1</a></li>
							<li class="li3"><a href="">你好，死神1</a></li>
						</ul>
					</li>

					<li class="li2"><a href="">你好，死神2</a>
						<ul class="nav3">
							<li class="li3"><a href="">你好，死神2</a></li>
							<li class="li3"><a href="">你好，死神2</a></li>
							<li class="li3"><a href="">你好，死神2</a></li>
							<li class="li3"><a href="">你好，死神2</a></li>
							<li class="li3"><a href="">你好，死神2</a></li>
						</ul>
					</li>

					<li class="li2"><a href="">你好，死神3</a>
						<ul class="nav3">
							<li class="li3"><a href="">你好，死神3</a></li>
							<li class="li3"><a href="">你好，死神3</a></li>
							<li class="li3"><a href="">你好，死神3</a></li>
							<li class="li3"><a href="">你好，死神3</a></li>
							<li class="li3"><a href="">你好，死神3</a></li>
						</ul>
					</li>

					<li class="li2"><a href="">你好，死神4</a>
						<ul class="nav3">
							<li class="li3"><a href="">你好，死神4</a></li>
							<li class="li3"><a href="">你好，死神4</a></li>
							<li class="li3"><a href="">你好，死神4</a></li>
							<li class="li3"><a href="">你好，死神4</a></li>
							<li class="li3"><a href="">你好，死神4</a></li>
						</ul>
					</li>

				</ul>
			</li>



		</ul>
	</div>

ok，大功告成。

根据改进，就可以做出你需要的啦。