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

Question

我正在尝试制作响应式菜单栏，为此我正在使用媒体查询。所以我正在使用这个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%;
    }              
}

Answer 1

在您的定义中，您设置了 position:absolute global

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

现在有两种方法。仅在您需要的媒体查询中定义 position:absolute 或在您的媒体查询中恢复它应该是正常的。在您的情况下：

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