CSS下拉菜单是网页设计中常用的UI控件之一。通常,我们会为这种下拉菜单加上边框,以突出显示菜单内容。 但是有时,我们希望下拉菜单没有边框,这样可以让页面看起来更简洁、干净。那么,如何实现CSS下拉菜
/* HTML */ <br> <div class="dropdown"> <button class="dropbtn">下拉菜单</button> <div class="dropdown-content"> <a href="#">菜单项1</a> <a href="#">菜单项2</a> <a href="#">菜单项3</a> </div> </div> <br> /* CSS */ <br> .dropdown { position: relative; display: inline-block; } <br> .dropbtn { background-color: #ffffff; color: #333333; padding: 10px; border: none; } <br> .dropdown-content { display: none; position: absolute; z-index: 1; } <br> .dropdown-content a { display: block; background-color: #ffffff; color: #333333; padding: 10px; } <br> .dropdown:hover .dropdown-content { display: block; } <br> .dropdown:hover .dropbtn { background-color: #eeeeee; }
粉丝
0
关注
0
收藏
0