我使用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;
}
问题:如何阻止菜单推送其他元素?
答案 0 :(得分:1)
所有这些都让彼此搞得一团糟。
一个简单的解决方案是将您的浮动菜单放在position:relative
中并添加这些CSS:
#floatingmenu div{
position:absolute;
top:100%
}
答案 1 :(得分:1)
您可以为#floatingmenu div提供修复高度。