반응 형 메뉴 및 미디어 쿼리 CSS

Question

응답 메뉴 모음을 만들려고하고 있으며 미디어에 쿼리를 사용하고 있습니다. 그래서이 CSS 코드를 사용하고 position:absolute 속성이 자동으로 다른 미디어 쿼리 에 적용되므로 어떻게 방지 할 수 있습니까? 절대

nav li:hover ul { 
    display:block; 
    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 만 정의하거나 필요한 미디어 쿼리에서 되돌립니다. 귀하의 경우 :

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