Question

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

我该如何解决这个问题？

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;？它将占用页面“流出”的元素，这样它就不会影响其他元素。

Answer 2

需要更改CSS：position: absolute;该属性定义用于元素的定位方法（静态，相对，绝对或固定）。

下拉菜单更改列表元素的位置

2 个答案: