在悬停时使3个方向的宽度/高度扩展

Question

所以基本上菜单按钮只改变两个方向的高度/宽度，我需要做三个（左右两个方向和底部）。

以下是它的样子： http://hijinxnetwork.net/web.html CSS：

body {
    bakground-image: url('http://i.imgur.com/vjB3x6m.png');
    background-repeat:repeat;
    background-attachment:fixed;
}
.top {
  background-color: #232323;
  width:100%;
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:40px;
}
.header img {
  width:450px;
  padding-left:650px;
}
.header {
  background-color: #101010;
  width:100%;
  position:absolute;
  height:225px;
  left:0;
  right:0;
  top:40px;
}
.nav {
  width:900px;
margin:0 auto;
}
.nav ul {
  position:relative;
  top:179px;
  left:auto;
  right:auto;
}
.nav li {
  float:left;
  display:inline;
  display:block;
  margin-left:3px;
  margin-right:3px;
  padding-left:20px;
  padding-right:20px;
  font-family: 'Roboto', sans-serif;
  font-weight:100;
  text-transform:uppercase;
  font-size:24px;
  background-color: #363636;
  height:50px;
  padding-top:20px;
  transition: 1s;
}
.nav li:hover {
  background-color:#a61919;
  height:60px;
  font-size:30px;
}
.nav li a {
  color:#ffffff;
  text-decoration:none;
}

所以，如果你对如何改变它有任何想法，那就太棒了，谢谢。