<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例(runoob.com)</title>
<meta charset="utf-8">
<style>
/* 容器 <div> - 需要定位下拉内容 */
.dropdown{
display:inline-block;
position:relative;
}
/*下拉按钮样式*/
.dropdownbtn{
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-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)/*向框添加一个或多个阴影 box-shadow: h-shadow（必须） v-shadow（必须） blur spread color inset */
}
/*下拉菜单的链接*/
.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 .dropdownbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropdownbtn">menu</button>
<div class="dropdown-content">
<a href="#">vita fede</a>
<a href="#">tiffany</a>
<a href="#">cartier</a>
</div>
</div>
</body>
</html>
