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

时间:2013-05-05 14:41:34

标签: javascript jquery html jquery-hover

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

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

2 个答案:

答案 0 :(得分:1)

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

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

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

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

答案 1 :(得分:1)

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