<style>
body,html,div,ul{
margin:0px;
padding:0px;
list-style:none;
}
.right,.nav{
float:right;
margin:20px;
}
.nav{position:relative;}
.nav:hover .navlist{
opacity:1;
}
.navlist{
background-color:#000;
width:80px;
height:160px;
opacity:0;
position:absolute;
transition: all 0.3s;/*允许CSS的属性值在一定的时间区间内平滑地过渡*/
}
.navlist li:hover{color:#FFF;background:#00F}
</style>
</head>
<body>
<div class="right">
<a href="#"></a>
<a href="#" class="nav">
短消息
<span class="nav1"></span>
<ul class="navlist">
<li>miss</li>
<li>miss</li>
<li>miss</li>
<li>miss</li>
</ul>
</a>
<a href="#" class="nav">
miss123
<span class="nav1"></span>
<ul class="navlist">
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</a>
</div>
