用CSS实现二级菜单

之前做案例时，在二级菜单那里卡了很长时间，现整理出来，共享一下

首先无论做三级菜单还是二级菜单时，第一步的思路就是把所有的菜单都显示出来，然后再去做相关的隐藏的操作；

那么二级菜单又分是，竖着排还是横着排两种，先说第一种竖着排。

二级菜单竖着排，是把二级菜单写入一级菜单的li里面，这样，二级菜单的宽就是一级菜单li的宽，之后的二级菜单里面的li元素会自动被挤到下面去，从而显示竖直排列的效果。

二级菜单横着排，也是把二级菜单写入一级菜单的li里面，但是这样显示的竖直排列，想要横向排列，有两种方法：第一张方法是给二级菜单设置宽，但是这样又缺陷，当元素变多的时候，需要不断修改宽度。第二种是给二级菜单添加定位(absolute),这样不需要不断地修改宽，比较方便。

/* 先设置好一级菜单和二级菜单都显示时候的样子 */
	ul{height: 50px;}
	ul li{float: left; width: 100px;height: 50px;text-align: center;line-height: 50px;
				list-style: none;border: 2px gray solid;background-color: green;}
	a{display: block;color: white;}/* 这里是后面设计hover效果的时候，将a铺满li标签 */
	/* ul li ul{position: absolute;} *//* 如果需要横着排列时，可将二级菜单设置为绝对定位 */
	/* 将二级菜单隐藏 */
	ul li ul{display: none;}
	/* 显示二级菜单 */
	ul li:hover ul{display: block;}
	/* 鼠标放在一级菜单上时的显示效果 */
	ul li a:hover{background-color: pink;color: #000000;}
	/* 这里只能给a添加hover选择器，不可以给li加，如果给li添加之后， 鼠标移动至二级菜单，一级菜单效果不会消失 */