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%;
    }              
}