我需要的jQuery slideDown（）问题

Question

我正在设计一个涉及slideDown的网站。

最初我已经设置了一个模板，如下图所示

当我将鼠标悬停在每个黑色块上时，将显示ul列表...但是当我将鼠标悬停时会出现问题...该块下面的所有内容向下移动（如下图所示）

我不能给出绝对的位置，因为上面和下面的所有内容都是浮动的（它们没有固定的高度）。 那么，通过在其中保留其余内容并在文本上方显示悬停内容，还能做些什么来获得slideDown？

Answer 1

要实现所需的功能，您应该使用一个内部子菜单元素slideDown（）而不是块本身。 考虑以下示例标记：

​<div class="item" id="mybox">floating box
    <ul class="submenu" style="display: none;">
        <li>Subitem 1</li>
        <li>Subitem 2</li>
        <li>Subitem 3</li>
    </ul>
</div>
<p>More content... Just to illustrate</p>
<p>More content... Just to illustrate</p>​​​​​​

CSS类似于：

.​item {
    position: relative; /* to hold absolutely positioned submenu inside */
    background: #2684b7;
    color: #fff;
    padding: 10px;
    float: left;
}

    .item .submenu {
        position: absolute; /* the menu would go on top of everything */
        background: #2684b7;
        width: 100%;
        left: 0;
    }

p {
    clear: both;
}

最后，JavaScript很简单，只是别忘了对动画进行防弹：

$('#mybox').hover(
    function() { /* mouseover */
        $(this).find('.submenu').slideDown();
    }, 
    function() { /* mouseout */
        $(this).find('.submenu').slideUp();
    }​​​​​
);

这是jsFiddle上的示例： http : //jsfiddle.net/zxrvC/

祝好运。

Answer 2

制作一个div，其位置为：relative和z-index：55，并在该div的内部添加一个新的div，其位置为：absolute，并给出宽度。 希望这能解决。

问候

ij