jQuery MouseOver下拉列表旁邊推div div

Question

我使用jQuery做了一個下拉菜單。在鼠標上輸入它打開，並在鼠標離開它關閉。

的問題

菜單似乎 '推' 旁邊的其他元素。

的jsfiddle工作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% 
} 

小提琴：

Answer 2

你可以給修復高度#floatingmenu股利。