CSS - 悬停时将菜单移至顶部

Question

我有一个菜单需要在悬停时将项目移动到顶部，但它不起作用。这就是我的工作。

.menu li{
    display: inline-block;      
}    

.menu li a{
    display: block; 
    line-height: 20px;
    padding: 0 20px;
    border-bottom: 5px solid #000000;   

}

.menu li a:hover{
    margin-top: -5px;
    border-bottom-width: 10px;
}

<li class="active">                             
    <a href="#">Home</a>
</li>
<li>                                
    <a href="#">About</a>
</li>               
<li>                                
    <a href="#">Contact</a>
</li>                   

Answer 1

http://jsfiddle.net/26MLv/

一种可能的解决方案：

.menu li{
    display: inline;      
}    

.menu li a{
    display:block; 
    float:left;
    line-height: 20px;
    padding: 0 20px;
    border-bottom: 5px solid #000000;   
    margin:0;
    background-color:#cecece;

}

.menu li a:hover{
    margin-top: -5px;
    border-bottom-width: 10px;
}