jquery - 下拉菜单改变列表元素的位置

Question

当我将下拉菜单添加到我的液体导航栏时，所有列表元素都被下推到我的下拉菜单结束的同一级别。

我该如何解决这个问题？

参见 jsfiddle

HTML

<nav id='menu'>     
        <ul>
            <li><a href=''>home</a></li>
            <li>
                <a href=''>categories</a>
                <ul id='hidden-list'>
                    <li><a href=''>test 1</a></li>
                    <li><a href=''>test 2</a></li>
                    <li><a href=''>test 3</a></li>
                    <li><a href=''>test 4</a></li>
                </ul>
            </li>
            <li><a href=''>donate</a></li>
            <li><a href=''>contact</a></li>
            <li><a href=''>about</a></li>
        </ul>
</nav>

CSS

*{
    font-size:14px;
    font-family:arial;
}
#menu {
    text-align:center;
    list-style-type: none;
}

#menu li{
    margin-top:10px;
    display:inline-block;
    margin-right:2.5%;
    margin-left:2.5%;
}

#menu li a {
    text-decoration: none;
    font-family:arial;
    font-size:300%;
    color:gold;
}

#menu li a:hover{
    color:black;
}

#hidden-list {
    padding:0;
    margin:0;
    visibility: hidden;
    width:200px;
}

#hidden-list li a {
    color:black;
    font-size:200%;
}

#hidden-list li a:hover {
    color:gold;
}

jQuery

$(document).ready(function() {
            $('html').animate({ opacity: 1 }, { duration: 4000 });
            $('ul li:nth-child(2) a').mouseenter(function() {
                $('#hidden-list').css('visibility', 'visible');
            });
            $('#hidden-list').mouseleave(function() {
                $('#hidden-list').css('visibility', 'hidden');
            });
});

Answer 1

您是否尝试过使用 position: absolute;？它会将一个元素从页面中“移出”，这样它就不会影响其他元素。