0

我使用 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;
}

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

4

2 回答 2

1

所有这些都相互混淆。

一个简单的解决方案是将浮动菜单放入position:relative并添加这些 CSS：

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

小提琴：http: //jsfiddle.net/aXPVq/1/

于 2013-05-05T14:45:24.243 回答
1

您可以为#floatingmenu div 提供固定高度。

于 2013-05-05T14:54:51.600 回答