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>

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

1 个答案: