css - CSS3 transition navigation like Google Chrome Website -

Is there a way to get hover effects like the effect on the Google Chrome website with CSS3 transition? My problem is, the animation goes in the wrong direction:

HTML:

  & lt; Ul & gt; & Lt; Li & gt; NAV # 1 & lt; / Li & gt; & Lt; Li & gt; Nav # 2 & lt; / Li & gt; & Lt; Li & gt; Nav # 3 & lt; / Li & gt; & Lt; / Ul & gt;   
 CSS:  
  ul {list-style: none; } Ul li (float: left; padding: 25px; -webkit-infection: all 0.4 s easy; -mose transition: all 0.4s ease; -O-infection: all 0.4s ease; transition: all 0.4s ease;) ul Lee: Hover {Border-bottom: 5px red solid;}   
 
 
 If you apply a padding in the bottom, this is a normal condition, then remove that padding when you get the desired effect.  
  ul li {float: left; padding: 25px ; -WebKit-Infection: All 0.4S Easy; Raman: All 0.4s Easy; -O-Infection: All 0.4s Easy; Transit: All 0.4s Easy; Border Bottom: 0; Padding-Down: 5px;} UL Lee: Hover {Border-bottom: 5px Red Solid ; Padding-down: 0;}   
 See this jsfiddle: (check in Chrome, Firefox and Safari)