在手机上滚动后，导航菜单消失

Question

我正在尝试设计一个新的响应式网站。我有一个响应菜单代码。

该代码在台式机和笔记本电脑上运行良好，但是当我在移动设备中滚动菜单（打开子菜单后）时，菜单变得令人沮丧。

我不知道为什么会发生

我正在使用Jquery 3.1.1，HTML5代码和CSS3作为样式。

请找到以下代码，如果有人可以帮助我...

(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 = 1000;
     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);

/*Menu Style Start*/
@media only screen and (min-width: 1024px) 
{
	#cssmenu
	{
		width:90%;
	}
}
*
{
	margin:0;
	padding:0;
	text-decoration:none;
}
header
{
	position:relative;
	width:100%;
}

.logo
{
	position:relative;
	z-index:123;
	padding:0px;
	font:18px verdana;
	color:#6DDB07;
	float:left;
	width:20%;
}
.logo a
{
	color:#6DDB07;
}
nav
{
	position:relative;
	width:980px;
	margin:0 auto;
	margin-top:20px;
}
#cssmenu .topul
{
	padding-top:15px;
}
#cssmenu .topul li
{
	position:relative;
	right:0px;
	
}
#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
{
	font-family:sans-serif;
}
#cssmenu > ul > li
{
	float:left;
}
#cssmenu > ul > li > a
{
	padding:17px;
	font-size:12px;
	letter-spacing:1px;
	text-decoration:none;
	color:#6E6E6E;
	font-weight:700;
}
#cssmenu > ul > li:hover > a,#cssmenu ul li.active a
{
	color:#fff;
}
#cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover
{
	background:#F05737!important;
	-webkit-transition:background .3s ease;
	-ms-transition:background .3s ease;
	transition:background .3s ease;
}
#cssmenu > ul > li.has-sub > a
{
	padding-right:30px;
}
#cssmenu > ul > li.has-sub > a:after
{
	position:absolute;
	top:22px;
	right:11px;
	width:8px;
	height:2px;
	display:block;
	background:#6E6E6E;
	content:''
}
#cssmenu > ul > li.has-sub > a:before
{
	position:absolute;
	top:19px;
	right:14px;
	display:block;
	width:2px;
	height:8px;
	background:#6E6E6E;
	content:'';
	-webkit-transition:all .25s ease;-ms-transition:all .25s ease;
	transition:all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:after
{
	background:#fff;
}
#cssmenu > ul > li.has-sub:hover > a:before
{
	top:23px;
	height:0;
	
}
#cssmenu ul ul
{
	position:absolute;
	left:-9999px;
}
#cssmenu ul ul li
{
	height:0;
	-webkit-transition:all .25s ease;
	-ms-transition:all .25s ease;
	background:#142b6d;
	transition:all .25s ease;
}
#cssmenu ul ul li:hover{}
#cssmenu li:hover > ul
{
	left:auto;
}
#cssmenu li:hover > ul > li
{
	height:35px;
}
#cssmenu ul ul ul
{
	margin-left:100%;
	top:0;
}
#cssmenu ul ul li a
{
	border-bottom:1px solid rgba(150,150,150,0.15);
	padding:11px 15px;
	width:170px;
	font-size:12px;
	text-decoration:none;
	color:#ddd;
	font-weight:400;
}
#cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a
{
	border-bottom:0;
}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover
{
	color:#fff;
}
#cssmenu ul ul li.has-sub > a:after
{
	position:absolute;
	top:16px;
	right:11px;
	width:8px;
	height:2px;
	display:block;
	background:#ddd;
	content:''
}
#cssmenu ul ul li.has-sub > a:before{position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#ddd;content:'';-webkit-transition:all .25s ease;-ms-transition:all .25s ease;transition:all .25s ease}
#cssmenu ul ul > li.has-sub:hover > a:before{top:17px;height:0}
#cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover{background:#193891;}
#cssmenu ul ul ul li.active a{border-left:1px solid #333}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a{border-top:1px solid #333}

@media screen and (max-width:1000px){
.logo
{
	position:absolute;
	top:0;
	left: 0;
	width:100%;
	height:46px;
	text-align:center;
	padding:10px 0 0 0 ;
	float:none;
}
.logo img
{
	text-align:center;
	margin: 0 auto;
}
.logo2{display:none}
nav{width:100%;}
#cssmenu .topul
{
	margin-top:50px;
}
#cssmenu{width:100%}
#cssmenu ul{width:100%;display:none}
#cssmenu ul li{width:100%;border-top:1px solid #D8D8D8;}
#cssmenu ul li:hover{background:#193891;}
#cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto}
#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0}
#cssmenu > ul > li{float:none}
#cssmenu ul ul li a{padding-left:25px}
#cssmenu ul ul li{background:#142b6d!important;}
#cssmenu ul ul li:hover{background:#193891!important}
#cssmenu ul ul ul li a{padding-left:35px}
#cssmenu ul ul li a{color:#fff;background:none}
#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#fff}
#cssmenu ul ul,#cssmenu ul ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}
#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none}
#cssmenu #head-mobile
{
	display:block;
	padding:23px;
	color:#F05737;
	font-size:12px;
	font-weight:700;
}
.button
{
	width:55px;
	height:46px;
	position:absolute;
	right:0;
	top:25px;
	cursor:pointer;
	z-index: 12399994;
}
nav#cssmenu {
    visibility: visible;
    opacity: 1;
        margin-top: 0;
}
.button:after
{
	position:absolute;
	top:22px;
	right:20px;
	display:block;
	height:4px;
	width:20px;
	border-top:2px solid #F05737;
	border-bottom:2px solid #F05737;
	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:20px;
	background:#F05737;
	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:19px;
	background:#142b6d;
	-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:#142b6d;
	width:19px;
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	transform:rotate(-45deg);
}
#cssmenu .submenu-button
{
	position:absolute;
	z-index:99;
	right:0;
	top:0;
	display:block;
	border-left:1px solid #D8D8D8;
	height:46px;
	width:46px;
	cursor:pointer;
}
#cssmenu .submenu-button.submenu-opened
{
	background:#F05737;
}
#cssmenu ul ul .submenu-button
{
	height:34px;
	width:34px;
}
#cssmenu .submenu-button:after
{
	position:absolute;
	top:22px;
	right:19px;
	width:8px;
	height:2px;
	display:block;
	background:#142b6d;
	content:'';
}
#cssmenu ul ul .submenu-button:after
{
	top:15px;
	right:13px;
	background:#fff;
}
#cssmenu .submenu-button.submenu-opened:after
{
	background:#fff;
}
#cssmenu .submenu-button:before
{
	position:absolute;
	top:19px;
	right:22px;
	display:block;
	width:2px;
	height:8px;
	background:#142b6d;
	content:'';
}
#cssmenu ul ul .submenu-button:before
{
	top:12px;
	right:16px;
	background:#fff;
}
#cssmenu .submenu-button.submenu-opened:before
{
	display:none;
}
#cssmenu ul ul ul li.active a
{
	border-left:none;
}
#cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a
{
	border-top:none;
}
}

/*Menu Style End*/

<script src="http://worldwebinfotech.in/test1/jquery-3.1.1.js"></script>
<!DOCTYPE html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Arch Door : Wood Door Manufacturer in Ahmedabad</title>
	<meta name="description" content="We at Arch Door Manufacturer of Wood door, Home door, PVC Foil Door, Ahmedabad, India"/>
	<meta name="keywords" content="Wood Door Manufacturer"/>

	<meta name="robots" content="index,follow" />
	<meta name="viewport" content="width=device-width, initial-scale=1"/>
	<meta content="General" name="rating" />
	<meta content="document" name="resource-type" />
	<meta content="global" name="distribution" />
	<meta name="document-classification" content="Wood Door Manufacturer"/>
	<meta name="language" content="en-usa" />
	<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<header>
		<nav id='cssmenu'>
			<div class="logo"><a href="index.html"><img class="img-responsive" src="images/logo1.png" /> </a></div>
			<div id="head-mobile"></div>
			<div class="button"></div>
			<ul class="pull-right topul">
				<li class='active'><a href='#'>HOME</a></li>
				<li><a href='#'>ABOUT</a></li>
				<li><a href='#'>PRODUCTS</a>
					<ul>
						<li><a href='#'>Membrane Door</a>
							<ul>
								<li><a href='#'>Carving Membrane Door</a></li>
								<li><a href='#'>Texure Membrane Door</a></li>
								<li><a href='#'>Metal Membrane Door</a></li>
								<li><a href='#'>Routing Membrane Door</a></li>
								<li><a href='#'>Digital Membrane Door</a></li>
								<li><a href='#'>Cheks Membrane Door</a></li>
								<li><a href='#'>Multi Colour Membrane Door</a></li>
								<li><a href='#'>Routing With Digital Print Membrane Door</a></li>
							</ul>
						</li>
						<li><a href='#'>Laminate Door</a>
							<ul>
								<li><a href='#'>Metal Door</a></li>
								<li><a href='#'>Non Metal Door</a></li>
							</ul>
						</li>
						<li><a href='#'>Wooden Door</a>
							<ul>
								<li><a href='#'>Teak Wood Door</a></li>
								<li><a href='#'>Teak Wood Panel Door</a></li>
								<li><a href='#'>Teak Wood Carving Door</a></li>
							</ul>
						</li>
						<li><a href='#'>New Items</a>
							<ul>
								<li><a href='#'>Carving Membrane Door</a></li>
								<li><a href='#'>Routing With Digital Print</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li><a href='#'>NEWS & EVENTS</a></li>				
				<li><a href='#'>DOWNLOAD</a></li>
				<li><a href='#'>INQUIRY</a></li>
				<li><a href='#'>CONTACT</a></li>
			</ul>
		</nav>
	</header>
<script type="text/javascript" src="js.js"></script>