用CSS實現下拉選單功能(過於冗餘,此方法不建議)
阿新 • • 發佈:2018-12-26
<style> .dropdown{ position:relative; display:inline-block; } .dropbtn{ background-color:#4CAF50; color:white; padding:16px; font-size:16px; border:none; cursor:pointer; .dropdown_content{ display:none; position:absolute; background-color:f9f9f9; min-width:160px; box-show:0px 8px 16px 0px rgb(0,0,0,0,2); } .dropdown_content a{ color:black; padding:12px 16px; text-decoration:none; display:block; } .dropdown_content a:hover{ background-color:#f1f1f1; } .dropdown:hover .dropdown_content{ display:block; } .dropdown:hover .dropbtn{ background-color:#3e8e41; } </style> <div class"dropdown"> <button class="dropbtn"下拉選單</button> <div class="dropdown_content"> <a href="#">服裝</a> <a href="#">電器</a> <a href="#">傢俱</a> </div> </div> }