之前做案例时,在二级菜单那里卡了很长时间,现整理出来,共享一下
首先无论做三级菜单还是二级菜单时,第一步的思路就是把所有的菜单都显示出来,然后再去做相关的隐藏的操作;
那么二级菜单又分是,竖着排还是横着排两种,先说第一种竖着排。
二级菜单竖着排,是把二级菜单写入一级菜单的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添加之后, 鼠标移动至二级菜单,一级菜单效果不会消失 */