수퍼 피시 세로 메뉴 만들기 응답 성

Question

수퍼 피시 수직 메뉴를 사용하고 있지만 응답보기에서는 작동하지 않습니다. 응답 성을 위해이 문제를 해결해야합니다.

Answer 1

미디어 쿼리는 당신이 반응 메뉴가 반응하게하는 codepen에서 가져 this question

다음 코드에 주어진이 codepen 또 다른 좋은 예를 살펴 가지고하는 데 도움이됩니다.

@media screen and (max-width: 768px) { 
    body { 
     margin: 0; } } 

@media screen and (max-width: 768px) { 
    header.global nav #hamburger { 
     display: block; } } 
header.global nav ul { 
    margin: 0; 
    padding: 0 25px; 
    display: block; } 
@media screen and (max-width: 768px) { 
    header.global nav ul { 
     display: none; 
     margin: 7px 0; 
     padding: 0; } } 

@media screen and (max-width: 768px) { 
    header.global nav ul li { 
     width: 100%; 
     background: #2d2d2d; 
     border-left: none; 
     border-right: none; 
     border-top: 1px solid #474747; 
     border-bottom: 1px solid #141414; } 
    header.global nav ul li:first-child { 
     border-top: none; } 
    header.global nav ul li:last-child { 
     border-bottom: none; } } 

@media screen and (min-width: 768px) { 
    header.global nav ul li:hover > a { 
     position: relative; } 
    header.global nav ul li:hover > a:after { 
     content: ""; 
     position: absolute; 
     left: 20px; 
     top: 40px; 
     border-width: 0 8px 8px; 
     border-style: solid; 
     border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #ef3636; 
     display: block; 
     width: 0; 
     z-index: 999; } } 
@media screen and (max-width: 768px) { 
    header.global nav ul li ul { 
     width: 100% !important; 
    } 
} 
@media screen and (min-width: 768px) { 
    header.global nav ul li ul li:hover a:after { 
     border: none; } }