点击后展开
<style>
/*样式重置*/
ul{
list-style:none;
padding:0;
margin:0;
}
a{
text-decoration:none;
color:#333;
}
/*整体样式*/
.mail{
120px;
border:2px solid #999;
text-align:center;
}
.mail:hover ul{
display:block;
}
/*局部header*/
.header{
background:#999;
color:#fff;
}
/*局部:邮箱列表*/
.mail ul{
display:none;
}
.mail ul li:hover{
background:skyblue;
}
.mail ul li a{
display:block;
}
</style>
<div class="mail">
<div class="header">
邮箱
</div>
<ul class="email-list">
<li><a href='#'>qq邮箱</a></li>
<li><a href='#'>126邮箱</a></li>
<li><a href='#'>139邮箱</a></li>
</ul>
</div>
先写整体样式,再写局部样式
inline-block