我目前的情况：
http://jsfiddle.net/VOXRAZR/2a6r4/2/
我目前的问题： div的高度没有过渡效果，外部div的高度在悬停时增加（我不想要！）
HTML
<div id="black_bar"></div>
<div id="top_nav">
<a href="#"><div class="menu" id="home">HOME</div></a>
<a href="#"><div class="menu">LIST OF CAR MANUFACTURERS</div></a>
<a href="#"><div class="menu">WHY USE CARZPEDIA?</div></a>
<a href="#"><div class="menu">ABOUT US</div></a>
<a href="#"><div class="menu">CONTACT US</div></a>
</div>
CSS
body{
margin:0;
}
#top_nav{
background-color:#000;
height:auto;
}
#top_nav a{
text-decoration:none;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
}
.menu{
display:inline-block;
padding:1em;
font-size:1em;
}
.menu:hover{
background-color:#09F;
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
height:3em;
-webkit-transition:all 500ms ease;
-moz-transition:all 500ms ease;
-ms-transition:all 500ms ease;
-o-transition:all 500ms ease;
transition:all 500ms ease;
}
#home{
color:#09F;
}
#home:hover{
color:#FFF;
}