这篇文章主要介绍了怎么用纯CSS实现鼠标经过后出现下拉菜单，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联公司主要从事网站制作、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务郑州,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792
HTML部分：
1、我们可以使用任何的HTML元素来打开下拉菜单，如：或a
2、使用容器元素(例如
)来创建下拉菜单的内容，并放在任何你想放的位置上。
3、使用
元素来包裹这些元素，并使用CSS来设置下拉内容的样式。
CSS部分：
1、.dropdown使用position:relative,这将设置下拉菜单的内容放置在下拉按钮(使用position:absolute)的右下角位置。
2、.dropdown-content中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。注意:如果你想设置下拉内容与下拉按钮的宽度一致，可设置width为100%。
3、:hover选择器用于将鼠标移动到下拉按钮上时显示下拉菜单。
实例：用纯CSS做一个导航下拉菜单，当鼠标经过时出现下拉菜单
HTML代码：
纯CSS实现鼠标移动到按钮上打开下拉菜单。
下拉菜单
菜单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://www.cdkjz.cn/article/popjoi.html
