3行ドロップダウンメニューの問題

Question

応答可能な携帯電話にドロップダウンメニューを表示する際に問題があります。 testing pageを参照してブラウザのサイズを変更するか、携帯端末を確認してください。 3行のアイコンのドロップダウンメニューが表示されないことに注意してください。

3行のアイコンをクリックすると、JSのtoggleClass = "active"が呼び出され、HTMLから既存のメニューが表示されますが、何も起こっていません。私は何を間違えたのですか？

HTML

<div class="wrap"> 
    <nav class="menu"> 
     <ul class="active"> 
      <li class="active"><a href="#home">Home</a></li> 
      <li><a href="#logo">Logos</a></li> 
      <li><a href="#banner">Banners</a></li> 
      <li><a href="#email">Email/Promotions</a></li> 
      <li><a href="https://dribbble.com/search?q=Christian+Luneborg">Art</a></li> 
      <li><a href="#website">Websites</a></li> 
      <li><a href="#mobile">Mobiles</a></li> 
      <li><a href="https://www.linkedin.com/in/christian-luneborg-bb13431b" target="_blank"><img src="img/linkedin-logo-sm.png" /></a></li> 
     </ul> 
     <a class="toggle-nav" href="#">&#9776;</a> 
    </nav> 
</div> 

CSS

@media screen and (max-width: 860px) { 
.menu { 
    position:relative; 
    display:inline-block; 
} 

.menu ul.active { 
    display:none; 
} 

.menu ul { 
    width:100%; 
    position:absolute; 
    top:120%; 

    background:#1e1e1e; 
} 

.menu ul:after { 
    width:0px; 
    height:0px; 
    position:absolute; 
    top:0%; 
    content:''; 
    transform:translate(0%, -100%); 
    border-left:7px solid transparent; 
    border-right:7px solid transparent; 
    border-bottom:7px solid #303030; 

} 

.menu li { 
    margin:5px 0px 5px 0px; 
    float:left; 
    display:block; 

} 

.menu a { 
    display:block; 

} 

.toggle-nav { 
    float:left; 
    display:inline-block; 
    background:#1e1e1e; 
    color:#777; 
    font-size:20px; 
    transition:color linear 0.10s; 

} 

.toggle-nav:hover, .toggle-nav.active { 
    text-decoration:none; 
    color:#66a992; 
} 
} 

JS

jQuery(document).ready(function() { 
    jQuery('.toggle-nav').click(function(e) { 
    jQuery(this).toggleClass('active'); 
    jQuery('.menu ul').toggleClass('active'); 

    e.preventDefault(); 
    }); 
}); 

Answer 1

あなたは.wrapにoverflow: hidden;を持っていると、メニューが外position: absoluteとオーバーフローして表示されるので、それが表示からメニューを保っています.wrap。

overflow: hidden;を.wrapから削除するか（またはoverflow: visible;に設定）、メニューが表示されます。