响应菜单和媒体查询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; 
}