简单CSS3下拉菜单效果实现
<style>
#qq {
text-align:center;
}
.bb {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.aa {
position:absolute;
display: inline-block;
float:left;
}
.cc {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.cc a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.cc a:hover {background-color: #f1f1f1}
.aa:hover .cc {
display: block;
}
.aa:hover .bb {
background-color: #3e8e41;
}
</style>
</head>
<body id="qq">
<div class="aa" align="center">
<button class="bb">下拉菜单</button>
<div class="cc">
<a href="#">下拉菜单 1</a>
<a href="#">下拉菜单 2</a>
<a href="#">下拉菜单 3</a>
</div>
</div>
