网站上有许多的地方都有二级菜单,这些二级菜单加上一些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标签的锚点,使之可以–返回上部。