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