<!--HTML代码--> <div class="dropdown"> <button class="dropbtn">下拉菜单</button> <ul class="dropdown-content"> <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> <li><a href="#">菜单项3</a></li> </ul> </div> <!--CSS代码--> .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } .dropbtn { background-color: #4CAF50; color: white; padding: 10px; font-size: 16px; border: none; } .dropdown-content li { padding: 10px; } .dropdown-content li a { color: black; text-decoration: none; } .dropdown-content li:hover { background-color: #f1f1f1; }
通过CSS代码中的hover伪类选择器,当鼠标悬停在下拉菜单按钮上时,菜单项的显示方式改为块级元素,从而实现了下拉菜单的效果。