在网页设计中,二级菜单是一个非常常见且重要的组件。实现它可以帮助我们更好地组织网页内容,提高页面的可读性和可用性。下面介绍如何使用CSS实现二级菜单。首先,我们需要创建一个基本的菜单结构。对于一个简单
<ul class="menu"> <li><a href="#">一级菜单1</a> <ul> <li><a href="#">二级菜单1-1</a></li> <li><a href="#">二级菜单1-2</a></li> </ul> </li> <li><a href="#">一级菜单2</a></li> <li><a href="#">一级菜单3</a></li> </ul>
.menu ul { display: none; } .menu li:hover > ul { display: block; }
.menu li { position: relative; background-color: #fff; border: 1px solid #ccc; border-radius: 5px; margin-right: 10px; padding: 10px; } .menu ul { position: absolute; top: 100%; left: 0; } .menu ul li { background-color: #f0f0f0; border: none; border-radius: 0; margin-right: 0; padding: 5px; }
粉丝
0
关注
0
收藏
0