El menú desplegable jQuery MouseOver empuja div al lado

I have made a drop down menu using jQuery. On mouse enter it opens and on mouse leave it closes.

El problema

The menu seems to 'push' other elements beside.

jsFiddle working 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);
    });
});

CO

#floatingmenu
{
    width: 300px;
    float: right;
}
#menu
{
    width: 300px;
    float: right;
}

Pregunta: How can I stop the menu from pushing other elements?

preguntado el 05 de mayo de 13 a las 15:05

2 Respuestas

All those float a messing with each other.

An easy solution is to put your floating menu in position:relative and add those CSS :

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

Violín : http://jsfiddle.net/aXPVq/1/

contestado el 05 de mayo de 13 a las 15:05

Unfortunately, I can't use absolute positioning on the floating menu as it is not on the absolute right of the screen, but rather at the right of the container, which has a fixed width. - bytecode77

I don't follow you :/ Can you show me an img of what you want? - Karl André Gagnon

Aquí: dev-ch.com/files/cfd604e9-f665-7582-216c-3afb3b836eaa/… - As you see, the menu below that is pushed away - bytecode77

You cant realy achieve what you want without pos absolute since your elements overlap. But here, examine this : jsfiddle.net/aXPVq/13 . ¿Es eso lo que quieres? - Karl André Gagnon

Now that's what I want what I really really want :D - bytecode77

You can give fix height to #floatingmenu div.

contestado el 05 de mayo de 13 a las 15:05

This is only a good solution when there's no background color involved. - bytecode77

what background color has to do with height? - Mukesh Kumar

Ver este ejemplo: jsfiddle.net/aXPVq/9 - It should be all yellow, but only a heigth of 50px is yellow. - bytecode77

that is a different problem and can be solved by enclosing the drop down in another div jsfiddle.net/aXPVq/12 - Mukesh Kumar

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.