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

Demo jsFiddle

我用 jQuery animate 函数使中间的 DIV 扩展了它的高度。但问题在于它会压低底部的 DIV。

如何让它在不向下推的情况下扩展到底部 DIV？

Answer 1

将 html 更改为

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

将 jquery 更改为

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

将样式更改为

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

主要目的是将div放在另一个div里面，然后它不会把底部的div放下。

Working fiddle.