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; 
}