简单的菜单下拉效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0px;
padding: 0px;
}
.s{
/*border: 1px solid #000000;*/
width: 150px;
height: 230px;
}
.a{
/*border: 1px solid #000000;*/
width:150px;
height:48px;
background-color: dodgerblue;
text-align: center;
color: #FFFFFF;
}
p{
padding: 14px;
}
.b{
display: none;
/*border: 1px solid #000000;*/
width:150px;
height: 180px;
background-color: darkslategray;
color: #FFFFFF;
}
a{
display: block;
text-align: center;
line-height: 45px;
}
.s:hover .b{
display: block;
}
a:hover{
background-color: darkcyan;
}
.c{
/*border: 1px solid #000000;*/
width:100px;
height: 48px;
background-color: orangered;
border-radius: 20px;
}
</style>
</head>
<body>
<div class="s">
<div class="a">
<p>菜单</p>
</div>
<div class="b">
<a>the first</a>
<a>the two</a>
<a>the three</a>
<a>the four</a>
</div>
</div>
<div class="c">
</div>
</body>
</html>