Question

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

问题

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

jsFiddle work exapmle：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

所有这些都让彼此搞得一团糟。

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

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

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

Answer 2

您可以为#floatingmenu div提供修复高度。

jQuery MouseOver下拉列表将div推到旁边

2 个答案: