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，也给出宽度。希望这会解决。

此致

iijb