CSS二级下拉导航菜单是网站设计中常用的一种菜单形式。通过嵌套无序列表和CSS样式,我们可以实现一个美观、易用的下拉菜单。
<ul class="menu"> <li><a href="#">菜单一</a> <ul> <li><a href="#">子菜单一</a></li> <li><a href="#">子菜单二</a></li> <li><a href="#">子菜单三</a></li> </ul> </li> <li><a href="#">菜单二</a> <ul> <li><a href="#">子菜单四</a></li> <li><a href="#">子菜单五</a></li> <li><a href="#">子菜单六</a></li> </ul> </li> </ul> .menu { list-style: none; margin: 0; padding: 0; } .menu li { display: inline-block; position: relative; } .menu a { display: block; padding: 10px; color: #fff; background-color: #333; text-decoration: none; } .menu ul { position: absolute; top: 100%; left: 0; display: none; } .menu li:hover ul { display: block; } .menu ul li { display: block; white-space: Nowrap; } .menu ul a { padding: 10px 20px; } .menu ul ul { margin-left: 100%; top: 0; } .menu ul li:hover > ul { display: block; }
我们首先定义一个ul元素作为菜单的容器,并给它添加一个menu class。这里我们采用了display:inline-block来让菜单项排列在同一行,并使用position:relative来设置子菜单的位置。
接着,我们定义菜单项的样式,包括文字颜色、背景颜色和鼠标悬停效果等。给ul和li元素分别设置了margin和padding为0,以免出现多余的空白。
然后,我们定义了子菜单ul的样式,并通过position:absolute和top:100%将它放在菜单项下方。同时,我们设置了display:none来隐藏子菜单,使其在鼠标悬浮时才显示。