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

#floatingmenu div に高さを固定できます。

于 2013-05-05T14:54:51.600 に答える
1

それらはすべて互いにいじり合っています。

簡単な解決策は、フローティング メニューを配置してposition:relativeそれらの CSS を追加することです。

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

フィドル: http://jsfiddle.net/aXPVq/1/

于 2013-05-05T14:45:24.243 に答える