189 8069 5689

怎么用纯CSS实现鼠标经过后出现下拉菜单

这篇文章主要介绍了怎么用纯CSS实现鼠标经过后出现下拉菜单,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

创新互联公司主要从事网站制作、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务郑州,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

HTML部分:

1、我们可以使用任何的HTML元素来打开下拉菜单,如:或a

菜单1

菜单2

菜单3

CSS部分:

.dropbtn{

background-color:#4CAF50;

color:white;

padding:16px;

font-size:16px;

border:none;

cursor:pointer;

}

.dropdown{

position:relative;

display:inline-block;

}

.dropdown-content{

display:none;

position:absolute;

background-color:#f9f9f9;

width:100%;;

box-shadow:0px8px16px0pxrgba(0,0,0,0.2);

}

.dropdown-contenta{

color:black;

padding:12px16px;

text-decoration:none;

display:block;

}

.dropdown-contenta:hover{

background-color:#f1f1f1

}

.dropdown:hover.dropdown-content{

display:block;

}

.dropdown:hover.dropbtn{

background-color:#3e8e41;

}

感谢你能够认真阅读完这篇文章,希望小编分享的“怎么用纯CSS实现鼠标经过后出现下拉菜单”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


文章名称:怎么用纯CSS实现鼠标经过后出现下拉菜单
本文网址:http://cdxtjz.cn/article/popjoi.html

其他资讯