スーパーフィッシュの垂直メニューを作成したいレスポンシブ

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