Отзывчивое горизонтальное меню на CSS/JS

<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<header>
  <div class="container">
  <nav id='navigatsion_menyu'>
  <div class="snachok_logotipa"><a href="/">ZORNET.RU</a></div>
  <div id="head-mobile"></div>
  <div class="pugovitsa"></div>
  <ul>
  <li class='kagednola'><a href='#'>КОНТАКТЫ</a></li>
  <li><a href='#'>СКРИПТЫ</a></li>
  <li><a href='#'>ШАБЛОНЫ</a>
  <ul>
  <li><a href='#'>Product 1</a>
  <ul>
  <li><a href='#'>Sub Product</a></li>
  <li><a href='#'>Sub Product</a></li>
  </ul>
  </li>
  <li><a href='#'>Product 2</a>
  <ul>
  <li><a href='#'>Sub Product</a></li>
  <li><a href='#'>Sub Product</a></li>
  </ul>
  </li>
  </ul>
  </li>
  <li><a href='#'>ДИЗАЙН</a></li>
  <li><a href='#'>VIDEO</a></li>
  <li><a href='#'>CSS</a></li>
  <li><a href='#'>ГЛАВНАЯ</a></li>
  </ul>
  </nav>
  </div>
  </header>

header{
background: #272222;
padding: 12px;
}

.snachok_logotipa{
position:relative;
z-index:123;
padding:10px;
font:18px verdana;
color:#6DDB07;
float:left;
width:15%}

.snachok_logotipa a{
color:#fff;
}

nav{
position:relative;
}

#navigatsion_menyu,#navigatsion_menyu ul,#navigatsion_menyu ul li,#navigatsion_menyu ul li a,#navigatsion_menyu #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;
margin: 0;
padding: 0;
}

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

#navigatsion_menyu #head-mobile{
display:none}

#navigatsion_menyu{
font-family:sans-serif;
}

#navigatsion_menyu > ul > li{
float: right;
}

#navigatsion_menyu > ul > li > a{
padding:17px;
font-size:12px;
letter-spacing:1px;
text-decoration:none;
color:#ddd;
font-weight:700;
}

#navigatsion_menyu > ul > li:hover > a,#navigatsion_menyu ul li.kagednola a{
color:#fff
}

#navigatsion_menyu > ul > li:hover,#navigatsion_menyu ul li.kagednola:hover,#navigatsion_menyu ul li.kagednola,#navigatsion_menyu ul li.has-sub.kagednola:hover{
background:#2475a5!important;
-webkit-transition:background .3s ease;
-ms-transition:background .3s ease;
transition:background .3s ease;
}

#navigatsion_menyu > ul > li.has-sub > a{
padding-right:30px}

#navigatsion_menyu > ul > li.has-sub > a:after{
position:absolute;
top:22px;
right:11px;
width:8px;
height:2px;
display:block;
background:#ddd;
content:''}

#navigatsion_menyu > ul > li.has-sub > a:before{
position:absolute;
top:19px;
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}

#navigatsion_menyu > ul > li.has-sub:hover > a:before{
top:25px;
height:0;
}

#navigatsion_menyu ul ul{
position:absolute;
left:-9999px}

#navigatsion_menyu ul ul li{
height:0;
-webkit-transition:all .25s ease;
-ms-transition:all .25s ease;
background:#333;
transition:all .25s ease}

#navigatsion_menyu ul ul li:hover{
}

#navigatsion_menyu li:hover > ul{
left:auto}

#navigatsion_menyu li:hover > ul > li{
height:35px}

#navigatsion_menyu ul ul ul{
margin-left:100%;
top:0}

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

#navigatsion_menyu ul ul li:last-child > a,#navigatsion_menyu ul ul li.last-item > a{
border-bottom:0}

#navigatsion_menyu ul ul li:hover > a,#navigatsion_menyu ul ul li a:hover{
color:#fff}

#navigatsion_menyu ul ul li.has-sub > a:after{
position:absolute;
top:16px;
right:11px;
width:8px;
height:2px;
display:block;
background:#ddd;
content:''}

#navigatsion_menyu 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}

#navigatsion_menyu ul ul > li.has-sub:hover > a:before{
top:17px;
height:0}

#navigatsion_menyu ul ul li.has-sub:hover,#navigatsion_menyu ul li.has-sub ul li.has-sub ul li:hover{
background:#363636;
}

#navigatsion_menyu ul ul ul li.kagednola a{
border-left:1px solid #333}

#navigatsion_menyu > ul > li.has-sub > ul > li.kagednola > a,#navigatsion_menyu > ul ul > li.has-sub > ul > li.kagednola> a{
border-top:1px solid #333}

@media screen and (max-width:1000px){
.snachok_logotipa{
position:absolute;
top:0;
left: 0;
width:100%;
height:46px;
text-align:center;
padding:10px 0 0 0;
float:none}

.snachok_logotipa2{
display:none}

nav{
width:100%;
}

#navigatsion_menyu{
width:100%}

#navigatsion_menyu ul{
width:100%;
display:none}

#navigatsion_menyu ul li{
width:100%;
border-top:1px solid #444}

#navigatsion_menyu ul li:hover{
background:#363636;
}

#navigatsion_menyu ul ul li,#navigatsion_menyu li:hover > ul > li{
height:auto}

#navigatsion_menyu ul li a,#navigatsion_menyu ul ul li a{
width:100%;
border-bottom:0}

#navigatsion_menyu > ul > li{
float:none}

#navigatsion_menyu ul ul li a{
padding-left:25px}

#navigatsion_menyu ul ul li{
background:#333!important;
}

#navigatsion_menyu ul ul li:hover{
background:#363636!important}

#navigatsion_menyu ul ul ul li a{
padding-left:35px}

#navigatsion_menyu ul ul li a{
color:#ddd;
background:none}

#navigatsion_menyu ul ul li:hover > a,#navigatsion_menyu ul ul li.kagednola > a{
color:#fff}

#navigatsion_menyu ul ul,#navigatsion_menyu ul ul ul{
position:relative;
left:0;
width:100%;
margin:0;
text-align:left}

#navigatsion_menyu > ul > li.has-sub > a:after,#navigatsion_menyu > ul > li.has-sub > a:before,#navigatsion_menyu ul ul > li.has-sub > a:after,#navigatsion_menyu ul ul > li.has-sub > a:before{
display:none}

#navigatsion_menyu #head-mobile{
display:block;
padding:23px;
color:#ddd;
font-size:12px;
font-weight:700}

.pugovitsa{
width:55px;
height:46px;
position:absolute;
right:0;
top:0;
cursor:pointer;
z-index: 12399994;
}

.pugovitsa:after{
position:absolute;
top:22px;
right:20px;
display:block;
height:4px;
width:20px;
border-top:2px solid #dddddd;
border-bottom:2px solid #dddddd;
content:''}

.pugovitsa: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:#ddd;
content:''}

.pugovitsa.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:#fff;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg)}

.pugovitsa.menu-opened:before{
top:23px;
background:#fff;
width:19px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg)}

#navigatsion_menyu .nagdsa-mibdnsole{
position:absolute;
z-index:99;
right:0;
top:0;
display:block;
border-left:1px solid #444;
height:46px;
width:46px;
cursor:pointer}

#navigatsion_menyu .nagdsa-mibdnsole.submenu-opened{
background:#262626}

#navigatsion_menyu ul ul .nagdsa-mibdnsole{
height:34px;
width:34px
  }

#navigatsion_menyu .nagdsa-mibdnsole:after{
position:absolute;
top:22px;
right:19px;
width:8px;
height:2px;
display:block;
background:#ddd;
content:''}

#navigatsion_menyu ul ul .nagdsa-mibdnsole:after{
top:15px;
right:13px}

#navigatsion_menyu .nagdsa-mibdnsole.submenu-opened:after{
background:#fff}

#navigatsion_menyu .nagdsa-mibdnsole:before{
position:absolute;
top:19px;
right:22px;
display:block;
width:2px;
height:8px;
background:#ddd;
content:''}

#navigatsion_menyu ul ul .nagdsa-mibdnsole:before{
top:12px;
right:16px}

#navigatsion_menyu .nagdsa-mibdnsole.submenu-opened:before{
display:none}

#navigatsion_menyu ul ul ul li.kagednola a{
border-left:none}

#navigatsion_menyu > ul > li.has-sub > ul > li.kagednola > a,#navigatsion_menyu > ul ul > li.has-sub > ul > li.kagednola > a{
border-top:none}
}

(function($) {
  $.fn.menumaker = function(options) {  
  var navigatsion_menyu = $(this), settings = $.extend({
  format: "dropdown",
  sticky: false
  }, options);
  return this.each(function() {
  $(this).find(".pugovitsa").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();
  }
  }
  });
  navigatsion_menyu.find('li ul').parent().addClass('has-sub');
  multiTg = function() {
  navigatsion_menyu.find(".has-sub").prepend('<span class="nagdsa-mibdnsole"></span>');
  navigatsion_menyu.find('.nagdsa-mibdnsole').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 navigatsion_menyu.addClass('dropdown');
  if (settings.sticky === true) navigatsion_menyu.css('position', 'fixed');
  resizeFix = function() {
  var mediasize = 1000;
  if ($( window ).width() > mediasize) {
  navigatsion_menyu.find('ul').show();
  }
  if ($(window).width() <= mediasize) {
  navigatsion_menyu.find('ul').hide().removeClass('open');
  }
  };
  resizeFix();
  return $(window).on('resize', resizeFix);
  });
  };
  })(jQuery);

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