CSS3过渡导航，如Google Chrome网站

有没有一种方法可以像使用CSS3转换的Google Chrome网站（）那样获得悬停效果？我的问题是，动画进入了错误的方向：

HTML:

---

如果在正常状态下在底部应用填充物，则在悬停时移除该填充物，以获得所需效果

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

---

看看这个JSFIDLE：（在Chrome、Firefox和Safari中测试过）

Google用JavaScript实现了这一点。

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

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