CSS下拉菜单是网页设计中常见的一种交互式元素。它可以帮助用户快速找到所需的内容,让网页变的更加易用和友好。下面我们就来看看如何使用CSS来编写一个下拉菜单代码。 首先,我们需要先定义一个菜单列表。我
<ul class="menu-list"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Products</a> <ul> <li><a href="#">Product 1</a></li> <li><a href="#">Product 2</a></li> <li><a href="#">Product 3</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul>
.menu-list li { display: inline-block; }
.menu-list a { display: block; padding: 10px; color: #333; text-decoration: none; }
.menu-list li:hover ul { display: block; } .menu-list ul { display: none; position: absolute; background-color: #fff; border: 1px solid #ccc; padding: 0; margin: 0; list-style: none; } .menu-list ul li { display: block; } .menu-list ul li a { display: block; padding: 10px; color: #333; text-decoration: none; }
.menu-list { width: 500px; margin: 0 auto; }
粉丝
0
关注
0
收藏
0