当在其上方的 div 上使用 .slideToggle 时，导航菜单会向下移动

Question

我正在尝试为练习网站的一部分制作一个导航菜单，并且我制作了一个动画，当其中一个菜单选项悬停在上方时，它基本上会滑下绿色 div，但是一旦发生这种情况整个导航菜单向下滑动。我不想要。我尝试将导航菜单位置更改为绝对位置，但随后它失去了它的位置，我无法重新定位它。任何帮助将不胜感激，谢谢！

这是 JSfiddle 版本。

HTML:

<ul id="nav_animations">
    <li class="nav_square home_square" id="greenHome"></li>
</ul>
<ul id="navlist">
    <li class="navlistitems" id="home">Home</li>
</ul>

CSS:

#nav_animations {
    display:inline;
    position:relative;
    bottom:13px;
}
#greenHome {
    display:none;
}
.nav_square {
    background-color:green;
    width:100px;
    height:15px;
    z-index:22;
    position:relative;
}
#navlist {
    display:inline;
    font-family: 'Dhurjati', sans-serif;
    font-size:45px;
    position:relative;
}
.navlistitems {
    display:inline;
    padding:50px;
    color:black;
}

JavaScript:

$(document).ready(function(){
    $('#home').hover(function(){
        $('#greenHome').slideToggle('fast');
    });
});

PS：是的，我确实在我的实际代码中链接了 JQuery 库。

Answer 1

使用您的工作的快速而肮脏的解决方案如下所示。如果您希望绿色下拉菜单位于父导航项下方，您应该在 li.navlistitems 中添加 ul#nav_animations。这就是我在下面所做的。我还稍微修改了您的 CSS 以考虑到这一点。

这是我为您整理的 JSFiddle：http://jsfiddle.net/84amnjz7/1/

CSS:

#navlist {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-family: 'Dhurjati', sans-serif;
    font-size: 45px;
    position: relative;
    }
    .navlistitems {
        position: relative;
        padding: 25px 0 0;
        display:block;
        float: left;
        color: #000;
        }

        #nav_animations {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            margin: 0;
            padding: 0;
            list-style-type: none;
            width: 100%;
            }
            #greenHome {
                display: none;
                }
            .nav_square {
                background-color: green;
                width: 100%;
                height: 15px;
                z-index: 22;
                position: relative;
                }

jQuery:

$(document).ready(function(){
    $('#home').hover(function(){
        $('#greenHome').stop(true, true).slideToggle('fast'); /* ADDED .stop(true, true) */
    });
});

已修改 HTML：

<ul id="navlist">
    <li class="navlistitems" id="home">Home
        <ul id="nav_animations">
            <li class="nav_square home_square" id="greenHome"></li>
        </ul>
    </li>
</ul>

当在其上方的 div 上使用 .slideToggle 时，导航菜单会向下移动

Nav menu moves down when .slideToggle is used on div above it

html

javascript

css

jquery

css-position