CSS3 Responsive Menu 스크롤 할 때 모바일 (iPhone) 드롭 다운이 사라짐

Question

debrioconsulting.com의 emre에 의한 CSS3 응답 메뉴 드롭 다운 + 서브 메뉴 너비 로고 펜의 버전을 테스트 중입니다. 데스크탑 브라우저에서 볼 때 모든 것이 정상적으로 작동합니다 (Mac은 지금까지만). 그러나 드롭 다운 메뉴가 열려있는 iPhone (6 Plus iOS 10.3.1 실행)에서 테스트하면 스크롤하여 열린 메뉴가 사라집니다.

다시 사이트는 여기

내가 사용하고는 CSS입니다 debrioconsulting.com입니다 :

/*----------------nav styles---------------------*/ 

nav { 
    position: relative; 
    width: 980px; 
    /*margin: 0 auto;*/ 
    margin-top: -60px; 
} 

#cssmenu { 
    font: normal 14px Arial, Helvetica, sans-serif; 
} 

#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #head-mobile { 
    border: 0; 
    list-style: none; 
    line-height: 1; 
    display: block; 
    position: relative; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box 
} 

#cssmenu:after, #cssmenu>ul:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

#cssmenu #head-mobile { 
    display: none; 
} 

#cssmenu>ul>li { 
    float: left; 
    border-right: 1px solid #FFF; 
} 

#cssmenu ul li.last { 
    border-right: 0; 
    } 

#cssmenu>ul>li>a { 
    padding: 0 29px 0 29px; 
    font-size: 14px; 
    letter-spacing: 1px; 
    text-decoration: none; 
    color: #FBFCE8; 
} 

#cssmenu>ul>li:hover>a, #cssmenu ul li.active a { 
    color: #E6FF71; 
} 

@media screen and (max-width:920px) { 

    nav { 
    width: 100%; 
    } 
    #cssmenu { 
    width: 100%; 
    } 
    #cssmenu ul { 
    width: 100%; 
    display: none; 
    } 
    #cssmenu ul li { 
    width: 100%; 
     border-top: 1px solid rgba(251, 252, 252,0.5); 
     background-color: #3B5921; 
    } 
    #cssmenu ul li:hover { 
    background: #A4C74F; 
    } 

    #cssmenu > ul > li { 
    /*float: none;*/ 
     padding: 25px; 
     border-right: 0; 
    } 

    #cssmenu #head-mobile { 
    display: block; 
    padding: 23px; 
    font-size: 14px; 
    font-weight: normal; 
    } 
    .button { 
    width: 55px; 
    height: 46px; 
    position: absolute; 
    right: 0; 
    top: -15px; 
    cursor: pointer; 
    z-index: 12399994; 
    } 
    .button:after { 
    position: absolute; 
    top: 22px; 
    right: 20px; 
    display: block; 
    height: 8px; 
    width: 28px; 
    border-top: 2px solid #FBFCE8; 
    border-bottom: 2px solid #FBFCE8; 
    content: ''; 
    } 
    .button:before { 
    -webkit-transition: all .3s ease; 
    -ms-transition: all .3s ease; 
    transition: all .3s ease; 
    position: absolute; 
    top: 16px; 
    right: 20px; 
    display: block; 
    height: 2px; 
    width: 28px; 
    background: #FBFCE8; 
    content: ''; 
    } 
    .button.menu-opened:after { 
    -webkit-transition: all .3s ease; 
    -ms-transition: all .3s ease; 
    transition: all .3s ease; 
    top: 23px; 
    border: 0; 
    height: 2px; 
    width: 27px; 
    background: #fff; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    } 
    .button.menu-opened:before { 
    top: 23px; 
    background: #fff; 
    width: 27px; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    } 
} 

가 그리고 여기에 나는 또한 테스트 파일과 하위 디렉토리를 만든 JS

(function($) { 
     $.fn.menumaker = function(options) { 
     var cssmenu = $(this), 
      settings = $.extend({ 
      format: "dropdown", 
      sticky: false 
      }, options); 
     return this.each(function() { 
      $(this).find(".button").on('click', function() { 
      $(this).toggleClass('menu-opened'); 
      var mainmenu = $(this).next('ul'); 
      if (mainmenu.hasClass('open')) { 
       mainmenu.slideToggle().removeClass('open'); 
      } else { 
       mainmenu.slideToggle().addClass('open'); 
       if (settings.format === "dropdown") { 
       mainmenu.find('ul').show(); 
       } 
      } 
      }); 
      cssmenu.find('li ul').parent().addClass('has-sub'); 
      multiTg = function() { 
      cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>'); 
      cssmenu.find('.submenu-button').on('click', function() { 
       $(this).toggleClass('submenu-opened'); 
       if ($(this).siblings('ul').hasClass('open')) { 
       $(this).siblings('ul').removeClass('open').slideToggle(); 
       } else { 
       $(this).siblings('ul').addClass('open').slideToggle(); 
       } 
      }); 
      }; 
      if (settings.format === 'multitoggle') multiTg(); 
      else cssmenu.addClass('dropdown'); 
      if (settings.sticky === true) cssmenu.css('position', 'fixed'); 
      resizeFix = function() { 
      var mediasize = 920; 
      if ($(window).width() > mediasize) { 
       cssmenu.find('ul').show(); 
      } 
      if ($(window).width() <= mediasize) { 
       cssmenu.find('ul').hide().removeClass('open'); 
      } 
      }; 
      resizeFix(); 
      return $(window).on('resize', resizeFix); 
     }); 
     }; 
    })(jQuery); 

    (function($) { 
     $(document).ready(function() { 
     $("#cssmenu").menumaker({ 
      format: "multitoggle" 
     }); 
     }); 
    })(jQuery); 

입니다 펜에서 똑같은 코드를 사용하면 전화기에서 같은 일이 일어납니다 - 메뉴가 스크롤에서 사라지면 메뉴가 나타납니다.

메뉴의 HTML을 추가 편집

...

<nav id="cssmenu"> 
     <div id="head-mobile"></div> 
     <div class="button"></div> 
     <ul> 
      <li class="first active"><a href="http://debrioconsulting.com/" title="Home">Home</a></li> 
      <li><a href="about" title="About">About</a></li> 
      <li><a href="benefits" title="Benefits">Benefits</a></li> 
      <li><a href="services" title="Services">Services</a></li> 
      <li><a href="clients" title="Clients">Clients</a></li> 
      <li class="last"><a href="contact" title="Contact">Contact</a></li> 
     </ul> 
</nav> 

Answer 1

트릭을 다음 두 줄을 않았다 주석처럼 보인다. 올바른 방향으로 나를 가리켜 주셔서 감사합니다 @ gbishop3.

// if ($(window).width() <= mediasize) { // cssmenu.find('ul').hide().removeClass('open'); // }