CSS三级菜单滑出显示在网站中非常常见,可以让页面看起来更加美观和专业。下面就来介绍如何实现这种效果。HTML代码: <div class= menu > <
CSS三级菜单滑出显示在网站中非常常见,可以让页面看起来更加美观和专业。下面就来介绍如何实现这种效果。
HTML代码: <div class="menu"> <ul> <li><a href="#">一级菜单1</a> <ul> <li><a href="#">二级菜单1-1</a> <ul> <li><a href="#">三级菜单1-1-1</a></li> <li><a href="#">三级菜单1-1-2</a></li> </ul> </li> <li><a href="#">二级菜单1-2</a></li> </ul> </li> <li><a href="#">一级菜单2</a></li> </ul> </div> CSS代码: .menu ul { list-style: none; margin: 0; padding: 0; } .menu ul li { float: left; position: relative; } .menu ul li a { display: block; width: 120px; height: 30px; line-height: 30px; text-align: center; background-color: #f0f0f0; color: #333; text-decoration: none; } .menu ul li:hover > ul { display: block; } .menu ul ul { display: none; position: absolute; top: 30px; left: 0; } .menu ul ul li a { width: 160px; height: 30px; line-height: 30px; text-align: center; background-color: #ccc; } .menu ul ul ul { top: 0; left: 160px; }
上面的HTML代码中,使用了三级嵌套的ul和li标签来实现菜单的层级结构。CSS代码中主要是设置菜单项的样式和一些基本的布局属性。其中,菜单项中的ul标签设置了position属性为absolute,top和left属性设置了菜单子项相对于父项的位置,display属性设置为none,这样菜单子项就默认是隐藏的。
通过CSS选择器.menu ul li:hover > ul,能够实现当鼠标移动到菜单项上时,对应的子项菜单就会显示出来。这里使用了“子项选择符”(>),表示只选择直接的后代元素。
如果要实现更多级别的菜单,只需要按照相同的方式逐级嵌套ul和li标签,然后设置相应的CSS样式即可。
粉丝
0
关注
0
收藏
0