css - 响应式菜单和媒体查询CSS

我正在尝试制作响应式菜单栏，为此我正在使用媒体
 查询。所以我正在使用此CSS代码并使用position:absolute
 属性，因此我的标题不会随着下拉菜单展开
position:absolute属性自动应用于其他媒体查询
 所以我怎么预防呢？

nav li:hover ul {
    display:block;
    position:absolute;
}

@media only screen and (max-width : 320px) {
    #header-wrap {
        width:95%;
        background-color:#fff;
        margin: 0 auto;
        min-height:100px;
        border-radius: 5px 5px 0px 0px;
    }

    nav li {
        display: block;
        float: none;
        width: 100%;
    }

    nav li a {
        border-bottom: 1px solid #576979;
    }

    nav li:hover ul {
        display:block;
    }

    nav li ul {
        width:100%;
    }

    nav li ul li {
        display:none;
        padding-left:10px;
        width:100%;
    }
}

最佳答案

在您的定义中设置位置：绝对全局

nav li:hover ul {
    display:block;
    position:absolute;
}

现在有两种方法。仅在您需要的媒体查询中定义位置：绝对，或在媒体查询中将其恢复正常的位置。您的情况也是：

@media only screen and (max-width : 320px) {
nav li:hover ul {
    display:block;
    position: static;
}