用CSS实现下拉菜单功能(过于冗余,此方法不建议)

版权声明:转载请附上文章地址 https://blog.csdn.net/weixin_38134491/article/details/85223829
<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>

}

猜你喜欢

转载自blog.csdn.net/weixin_38134491/article/details/85223829