jquery - コンテンツを押し下げることなく、jQuery animate で DIV の高さを増やします

Question

私はこのコードを持っています、

HTML

<div id="header-line"></div>
<div id="main-menu"></div>
<div id="content"></div>

CSS

#header-line {
    height: 20px;
    background-color: black;
    top:0;
    left:0;
}
#main-menu {
    height: 30px;
    background-color: green;
}
#content {
    background-color: blue;
    height: 200px;
}

Javascript

$("#main-menu").hover(function () {
    $(this).stop(true, false).animate({
        height: "100px"
    });
}, function () {
    $(this).stop(true, false).animate({
        height: "30px"
    });
});

デモjsFiddle

animatejQuery関数を使用して、中央の DIV の高さを拡張しました。しかし、これの問題は、一番下の DIV を押し下げることです。

下のDIVを押し下げずに拡張するにはどうすればよいですか?