像谷歌浏览器网站的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浏览器）