How to do HTML5 transition vertically up words

[albariun]

The below code works, but when mouse hover on the tab, the tab is vertically expanding downwards. How do I expand it upwards?\[code\]ul.nav li a {-webkit-transition: all 0.3s ease-out;background: #cbcbcb ;color: #174867;padding: 7px 5px 7px 5px;width: 50px;height:100px;display: block;text-decoration: none;-webkit-box-shadow: 2px 2px 4px #888;}ul.nav li a:hover {background: #ebebeb ;color: #67a5cd;padding: 80px 5px 0px 5px;}\[/code\]\[code\]<div class="navbox"><ul class="nav"><li><a href="http://stackoverflow.com/questions/15601223/#">Bad</a></li></ul></div>\[/code\]http://jsfiddle.net/jtwsJ/1/