1. 程式人生 > >用CSS實現下拉選單功能(過於冗餘,此方法不建議)

用CSS實現下拉選單功能(過於冗餘,此方法不建議)

<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>

}