背景透明度 下拉菜单

 

 

下拉菜单

 

——————> 

 

<style>
/* 下拉按钮样式 */
.dropbtn {background-color: #4CAF50;color: white;padding: 16px;font-size: 16px;border: none;cursor: pointer;
}/* 容器 <div> - 需要定位下拉内容 */
.dropdown {position: relative;display: inline-block;
}/* 下拉内容 (默认隐藏) */
.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(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="#">菜鸟教程 1</a><a href="#">菜鸟教程 2</a><a href="#">菜鸟教程 3</a></div>
</div>