这个效果 怎么不让他下移啊
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#top{
margin:0 0 20px 0;
}
a{
text-decoration: none;
color: #666666;
font-size: 18px;
display:inline-block;
padding:20px 0 0 0;
font-family: 'Microsoft YaHei',"Lucida Grande",
Helvetica,Arial,Verdana,sans-serif;
}
li{
list-style: none;
padding: 0 0 30px;
width: 64px;
text-align: center;
color: #777;
display: block;
text-decoration: none;
float: left;
}
li span{
transition:height 1s;
-webkit-transition:height 1s;
display: block;
margin:0 0 10px;
background:inherit;
height:2px;
}
li:hover span{
background:#1E90FF ;
height:10px;
}
li:hover a{
color:#000000;
font-weight: 500;
}
#trans a{
clear:both;
margin:20px;
width:160px;
height:120px;
color:#000000;
font-size: 18px;
position: absolute;
top:100px;
}
</style>
</head>
<body>
<div id='top'>
<ul>
<li class="current">
<span></span>
<a href="###">案例</a>
</li>
<li class="current">
<span class=""></span>
<a href="###">客户</a>
</li>
<li class="current">
<span class=""></span>
<a href="###">服务</a>
</li>
<li class="current">
<span class=""></span>
<a href="###">支持</a>
</li>
</ul>
</div>