javascript - jQuery MouseOver 下拉菜单将 div 推到旁边

Question

我使用 jQuery 制作了一个下拉菜单。鼠标输入时它会打开，鼠标离开时它会关闭。

问题

菜单似乎将其他元素“推”到了旁边。

jsFiddle 工作示例:http://jsfiddle.net/aXPVq/

HTML

<div id="floatingmenu">
    <h1>FLOATING MENU</h1>
    <div style="display: none;">
        FLOATING MENU TEST<br />
        FLOATING MENU TEST<br />
    </div>
</div>
<br />
<br />
<br />
<br />
<br />
<div id="menu">
    TEST<br />
    TEST<br />
    TEST<br />
</div>

JS

$(function()
{
    $('#floatingmenu h1').mouseenter(function()
    {
        $(this).next().slideDown(100);
    })
    $('#floatingmenu h1').mouseleave(function()
    {
        $(this).next().slideUp(100);
    });
});

CSS

#floatingmenu
{
    width: 300px;
    float: right;
}
#menu
{
    width: 300px;
    float: right;
}

问题:如何阻止菜单推送其他元素？

Answer 1

所有这些都互相造成困惑。

一个简单的解决方案是将 float 菜单放在 position:relative 中并添加这些 CSS :

#floatingmenu div{
    position:absolute;
    top:100%
}

fiddle :http://jsfiddle.net/aXPVq/1/