像谷歌瀏覽器網站的CSS3過渡導航

Question

有沒有辦法獲得像谷歌Chrome網站（http://www.google.de/intl/de/chrome/browser/）CSS3過渡效果的懸停效果？我的問題是，在動畫進入了錯誤的方向：

HTML：

<ul> 
    <li>Nav#1</li> 
    <li>Nav#2</li> 
    <li>Nav#3</li> 
</ul> 

CSS：

ul{ list-style: none; } 
ul li{ 
    float: left; 
    padding: 25px; 
    -webkit-transition: all 0.4s ease; 
    -moz-transition: all 0.4s ease; 
    -o-transition: all 0.4s ease; 
    transition: all 0.4s ease; 
} 
ul li:hover{ border-bottom: 5px red solid; } 

http://jsfiddle.net/HMZKP/

Answer 1

如果您申請填充的底部在它的正常狀態，然後刪除填充時，徘徊獲得所需的效果。

ul li { 
    float: left; 
    padding: 25px; 
    -webkit-transition: all 0.4s ease; 
    -moz-transition: all 0.4s ease; 
    -o-transition: all 0.4s ease; 
    transition: all 0.4s ease; 
    border-bottom: 0; 
    padding-bottom: 5px; 
} 

ul li:hover { 
    border-bottom: 5px red solid; 
    padding-bottom: 0; 
} 

看到這個的jsfiddle：http://jsfiddle.net/xTjXK/（在Chrome測試，火狐& Safari瀏覽器）