div.高度的转换效果

Question

我的当前情况：

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;
}

Answer 1

只需为顶部栏设置一个固定的高度(这是CSS中的#top_nav(，并(可选(在其上设置overflow:hidden;(或者当您将鼠标悬停在其上时，内容会弹出。不知道这是否是故意的(

看到这个小提琴与溢出隐藏

或者这个有溢出的可见