jquery - 下拉列表的位置问题

Question

我正在设计一个下拉菜单，该菜单使用 jQuery .hover() 来显示一组隐藏的列表项，当悬停被激活时，隐藏的列表项会将父列表项移出位置。

CSS

mainNav {
    position: relative;
    top: 20px;
    width: 50 % ;
    float: left;
}

mainNav li {
    float: left;
    list - style: none;
}

mainNav ul {
    float: right;
    position: relative;
    z - index: 0;
}

mainNav li a {
    display: block;
    padding: 10px 15px 13px 15px;
    border: none;
    color: #777;
    float:left;
}

.drop-list{
    display:none;
    float:none;
    position:relative!important;
    z-index:100!important;
}

.drop-list li{
    float:none!important;
    position:relative!important;
    z-index:100!important;
} 

html

<div id="mainNav">

    <ul>
        <li class="drop-item"><a href="">Home</a>
            <ul class="drop-list">
                <li>SubNav</li>
                <li>SubNav</li>
                <li>SubNav</li>
                <li>SubNav</li>
            </ul>
        </li>

        <li class="drop-item"><a href="">Nav</a></li>

        <li class="drop-item"><a href="">Nav</a></li>

        <li class="drop-item"><a href="">Nav</a></li>  
   </ul>  
</div>

jQuery

$("li.drop-item").hover(function () {
    $(this).children('.drop-list').show();
    $(this).children('.drop-list').stop();
    $(this).children('.drop-list').animate({
        opacity: 1.0
    }, 200);
}, function () {
    $(this).children('.drop-list').stop();
    $(this).children('.drop-list').animate({
        opacity: 0.0
    }, 400, function () {
        $(this).hide();
    });
});

我再次设计下拉菜单的样式，该菜单使用 jQuery .hover() 来显示一组隐藏的列表项，当悬停被激活时，隐藏的列表项会将父列表项移出位置。子列表项应该在不影响任何其他元素的情况下出现在内容的前面。

JSFiddle

http://jsfiddle.net/JaySm/AXDdN/

Answer 1

绝对定位子菜单:

.drop-list{
    position:absolute;
}

详细说明:

通过设置position:relative，您可以随意定位元素。然而，按照标准，它仍然会显示在元素流中，就好像它没有被定位一样。换句话说，间隙将保留在其原始空间中。这将导致周围的元素移动，例如在 OP 菜单中。

设置position:absolute 将定位元素。就好像它从 Canvas 上取下并放在上面(或下面)的图层上一样。它的原始空间将被截断，周围的元素将不受影响。这将解决 OP 问题。