Is there a way to get a hover effect like the effect on the Google Chrome website (http://www.google.de/intl/de/chrome/browser/) with CSS3 transition? My problem is, that the animation goes into the wrong direction:
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; }