<div class="dropbox">
<a href="#" class="list">
菜单
</a>
<ul class="box">
<li><a href="#">List 1</a></li>
<li><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
<li><a href="#">List 4</a></li>
<li><a href="#">List 5</a></li>
</ul>
</div>
*{
padding: 0;
margin: 0;
}
.dropbox{
display: block;
}
.list{
display: block;
width: 80px;
height: 30px;
text-decoration: none;
background-color: #929292;
text-align: center;
line-height: 30px;
color: white;
}
.box{
display: none;
width: 70px;
height: 100px; ;
}
.box li{
list-style: none;
}
.box li a{
text-decoration: none;
display: block;
width: 70px;
height: 25px;
background-color: darkgray;
color: white;
text-align: center;
line-height: 25px;
}
.list:hover{
background-color: #c40000;
}
.dropbox:hover .box{
display: block;
}
.box li a:hover{
background-color: #c40000;
}
list.gif
网友评论