网站布局设计中,下拉菜单是很常见的功能,通过下拉的方式给用户呈现更多的选项,极大地方便了用户的使用。而在这样的下拉菜单中,css三级下拉菜单是一种很常见的选择,下面我们就来讲讲 css三级下拉菜单 怎
网站布局设计中,下拉菜单是很常见的功能,通过下拉的方式给用户呈现更多的选项,极大地方便了用户的使用。而在这样的下拉菜单中,css三级下拉菜单是一种很常见的选择,下面我们就来讲讲 css三级下拉菜单 怎么做。
<html> <head> <style> /* 隐藏 ul */ #nav ul{ display: none; position: absolute; z-index: 1; /* top=nav height */ top: 40px; } /* 鼠标悬浮效果 */ #nav li:hover > ul{ display: block; } /* 菜单背景和字体颜色 */ #nav li{ background-color: #fff; color: #333; } /* 隐藏 li 的边框 */ #nav ul li{ border: none; } /* 三级菜单的背景和字体颜色 */ #nav ul ul li{ background-color: #f7f7f7; color: #333; } </style> </head> <body> <ul id="nav"> <li> <a href="#">一级菜单1</a> <ul> <li><a href="#">二级菜单1</a></li> <li> <a href="#">二级菜单2</a> <ul> <li><a href="#">三级菜单1</a></li> <li><a href="#">三级菜单2</a></li> </ul> </li> </ul> </li> </ul> </body> </html>
上面的代码中,使用了两个层次嵌套的ul来实现三级下拉菜单的功能。首先将二级和三级菜单的ul隐藏,通过鼠标悬浮在一级菜单上来触发显示效果。三级菜单的样式与二级相类似,只需特别设置即可实现三级下拉菜单的效果。
粉丝
0
关注
0
收藏
0