简用二级菜单

网站上有许多的地方都有二级菜单，这些二级菜单加上一些hover效果，形成简单的动态效果使页面简洁，生动。
一级菜单
简单二级hover上去效果

代码如下

.nav_first{
			width: 150px;
			height: 50px;
			background-color: #999;
			font-size: 20px;
		}
		.nav_second{
			width: 150px;
			height: 50px;
			background-color: #f91112;
			display: none;                   //隐藏
			font-size: 18px;
			position: absolute;			//定位
			left: 0px;
			top: -50px;
		}
		.warpper:hover .nav_second{
			display: inline-block;         //出现
		}

让二级定位在一级附近，用display实现消失和出现效果。
注意：一级和二级要是父子级关系

学会简单二级于是运用在项目中。

代码
这是一个li中加一个div里再放一个ul li

下图是一个固定侧边，因为有hover效果，所以我也是用的二级菜单，其实是个三级菜单，但需要四个都显示所以解开了第一级。

代码如下(代码中可看出三级)

因为做的三级，所有点击上几个是也会触动最后一个，使之出现hover效果(这是不同之处)，使用display使第一级消失后给最外边的div一个a标签的锚点，使之可以–返回上部。