在网页中,经常需要实现导航栏中的子菜单的跳转功能。CSS中可以很方便地实现三级跳转,即子菜单中再添加子菜单。要实现三级跳转,可以使用CSS的一些属性和选择器。首先,需要在HTML中添加相应的标记,如下
<ul class="nav"> <li><a href="#">菜单一</a></li> <li> <a href="#">菜单二</a> <ul> <li><a href="#">子菜单一</a></li> <li><a href="#">子菜单二</a></li> <li> <a href="#">子菜单三</a> <ul> <li><a href="#">三级子菜单一</a></li> <li><a href="#">三级子菜单二</a></li> </ul> </li> </ul> </li> <li><a href="#">菜单三</a></li> </ul>
.nav ul { display: none; }
.nav > li:hover ul { display: block; }
.nav ul li:hover ul { display: block; }
.nav ul { display: none; } .nav > li:hover ul { display: block; } .nav ul li:hover ul { display: block; }
粉丝
0
关注
0
收藏
0