html>
下拉菜单实例|菜鸟教程()
.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;/*这个必须是none,也就是鼠标不放在div上,不会显示这部分内容*/
position:absolute;
background-color:#f9f9f9;
min-width:160px;
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;/*覆盖display:none;变成display:block;*/
}
.dropdown:hover.dropbtn{
background-color:#3e8e41;
}
下拉菜单
鼠标移动到按钮上打开下拉菜单。
下拉菜单
教程1
教程2
教程3
教程4
本文出自 “奋斗吧” 博客，转载请与作者联系！
原文：http://lvnian./7155281/1854271
