CSS3響應菜單移動（iPhone）上的下拉滾動消失

Question

我正在測試版本的CSS3響應菜單下拉+子菜單寬度徽標筆emre debrioconsulting.com。在大多數情況下，在桌面瀏覽器中查看時，一切正常（僅Mac到目前爲止）。但是，當我在打開下拉菜單的iPhone（運行iOS 10.3.1的6 Plus）上測試它時，我將滾動並打開菜單消失。

再次網站debrioconsulting.com

這裏是我使用的CSS：

/*----------------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'); // }