響應菜單和媒體查詢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

在你的定義設置位置：絕對全局

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

現在有兩種方式。只在需要的媒體查詢中定義position：絕對位置，或者在媒體查詢中將其恢復到正常位置。在你的情況也是：

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