<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

HTML

Код
[code]<div class="navigatos-megamenyu">
  <div class="navigatos">
  <ul>
  <li><a href="/">Главная</a></li>
  <li><a href="/">Скрипты</a>
  <li><a href="/">Стили</a></li>
<li><a href="/">Категории <i class="fa fa-chevron-down" style="font-size:12px;" aria-hidden="true"></i></a>
  <ul>
  <li><a href="#link">Под категория </a>
<ul>  
  <li><a href="/">Под категория 1.1</a></li>
  <li><a href="/">Под категория 1.2</a></li>
  <li><a href="/">Под категория 1.3</a></li>
  <li><a href="/">Под категория 1.4</a></li>
  </ul>
  </li>
  <li><a href="/">Под категория 2</a>
  <ul>
  <li><a href="/">Под категория 2.1</a></li>
  <li><a href="/">Под категория 2.2</a></li>
  <li><a href="/">Под категория 2.3</a></li>
  <li><a href="/">Под категория 2.4</a></li>
  <li><a href="/">Под категория 2.5</a></li>  
  </ul>
  </li>
  <li><a href="/">Под категория 3</a>
  <ul>
  <li><a href="/">Под категория 3.1</a></li>
  <li><a href="/">Под категория 3.2</a></li>
  <li><a href="/">Под категория 3.3</a></li>
  </ul>
  </li>
  <li><a href="/">Под категория 4</a>
  <ul>
  <li><a href="/">Под категория 4.1</a></li>
  <li><a href="/">Под категория 4.2</a></li>
  <li><a href="/">Под категория 4.3</a></li>
  <li><a href="/">Под категория 4.4</a></li>
  </ul>
  </li>
  </ul>
  </li>
  <li><a href="/">Файлы</a>
<li><a href="/">Коды</a>
  <li><a href="/">CSS</a>
  <li><a href="/">Связь</a></li>
  </ul>
  </div>
</div>

.navigatos-megamenyu {
  width: 100%;
  margin: 0px auto;
  background: #1f5c90;
  padding: 6px 0px 6px 0px;
  border-bottom: 2px solid;
  border-color: #a3a9af;
}
.navigatos-movable:after {
  content: "\f0c9";
  font-family: "FontAwesome";
  font-size: 38px;
  line-height: 38px;
  padding: 0;
  color: #FFF;
  float: right;
  position: relative;
  transform: translateY(-25%);
}
.navigatos-dropdown-icon:before {
  content: "\f078";
  font-family: "FontAwesome";
  display: none;
  cursor: pointer;
  float: right;
  padding: 10px 20px;
  margin: 10px;
  background: #337AB7;
  color: #FFF;
  font-size: 20px;
}
.navigatos > ul {
  margin: 0 auto;
  width: 100%;
  list-style: none;
  padding: 0;
  position: relative;
  box-sizing: border-box;
}
.navigatos > ul:before,
.navigatos > ul:after {
  content: "";
  display: table;
}
.navigatos > ul:after {
  clear: both;
}
.navigatos > ul > li {
  float: left;
  background: #1f5c90;
  padding: 0;
  margin: 0;
  transition: .2s ease-in-out;
}
.navigatos > ul > li a,
.navigatos-movable {
  text-decoration: none;
  padding: 18px 28px;
  display: block;
  color: #f9f4f4;
  font-size: 20px;
  line-height: 20px;
  font-family: 'Roboto Condensed', sans-serif;
  transition: .2s ease-in-out;
}
.navigatos-movable {
  display: none;
}

.navigatos > ul > li:hover {
  background: #a8dcfb;
  border-radius: 3px;
}
.navigatos > ul > li:hover a {
  color: #2f3240;
}
.navigatos > ul > li > ul {
  display: none;
  width: 100%;
  background: #cce5fd;
  padding: 18px;
  position: absolute;
  z-index: 99;
  left: 0;
  margin: 8px;
  list-style: none;
  box-sizing: border-box;
}
.navigatos > ul > li > ul:before,
.navigatos > ul > li > ul:after {
  content: "";
  display: table;
}
.navigatos > ul > li > ul:after {
  clear: both;
}
.navigatos > ul > li > ul > li {
  margin: 0;
  padding-bottom: 0;
  list-style: none;
  width: 25%;
  background: none;
  float: left;
}
.navigatos > ul > li > ul > li a {
  padding: 10px;
  width: 85%;
  display: block;
  border-bottom: 1px solid #337AB7;
}
.navigatos > ul > li > ul > li a:hover {
  color: #337AB7;
  border-bottom: 1px solid #000;
}
.navigatos > ul > li > ul > li > ul {
  display: block;
  padding: 0;
  margin: 10px 0 0;
  list-style: none;
  box-sizing: border-box;
}
.navigatos > ul > li > ul > li > ul:before,
.navigatos > ul > li > ul > li > ul:after {
  content: "";
  display: table;
}
.navigatos > ul > li > ul > li > ul:after {
  clear: both;
}
.navigatos > ul > li > ul > li > ul > li {
  float: left;
  width: 100%;
  margin: 0;
}
.navigatos > ul > li > ul > li > ul > li a {
  border: 0;
  padding: 8px 10px;
  font-size: 18px;
}
.navigatos > ul > li > ul > li > ul > li a:hover {
  border: 0;
}
.navigatos > ul > li > ul.normal-sub {
  width: 315px;
  left: auto;
  padding: 18px;
}
.navigatos > ul > li > ul.normal-sub > li {
  width: 100%;
}
.navigatos > ul > li > ul.normal-sub > li a {
  border: 0;
  padding: 10px;
}
@media only screen and (max-width: 768px) {
  .navigatos-megamenyu {
  width: 100%;
  }
  .navigatos-movable {
  display: block;
  }
  .navigatos-dropdown-icon:before {
  display: block;
  }
  .navigatos > ul {
  display: none;
  }
  .navigatos > ul > li {
  width: 100%;
  float: none;
  display: block;
  background: #a6cdea;
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
  }
  .navigatos > ul > li a {
  padding: 20px;
  width: 100%;
  display: block;
  color: #464646
  }
  .navigatos > ul > li > ul {
  position: relative;
  }
  .navigatos > ul > li > ul.normal-sub {
  width: 100%;
   
  }
  .navigatos > ul > li > ul > li {
  float: none;
  width: 100%;
  }
  .navigatos > ul > li > ul:not(.normal-sub) > li {
  margin-top: 20px;
  }  
  .navigatos > ul > li > ul > li:first-child {
  margin: 0;
  }
  .navigatos > ul > li > ul > li > ul {
  position: relative;
  }
  .navigatos > ul > li > ul > li > ul > li {
  float: none;
  }
  .navigatos .show-on-movable {
  display: block;
  }
}

$(document).ready(function() {
  "use strict";
  $('.navigatos > ul > li:has( > ul)').addClass('navigatos-dropdown-icon');
  $('.navigatos > ul > li > ul:not(:has(ul))').addClass('normal-sub');
  $(".navigatos > ul").before("<span class=\"navigatos-movable\">Меню:</span>");
  $(".navigatos > ul > li").hover(function(e) {
  if ($(window).width() > 768) {
  $(this).children("ul").stop(true, false).fadeToggle(150);
  e.preventDefault();
  }
  });
  $(".navigatos > ul > li").click(function() {
  if ($(window).width() <= 768) {
  $(this).children("ul").fadeToggle(150);
  }
  });
  $(".navigatos-movable").click(function(e) {
  $(".navigatos > ul").toggleClass('show-on-movable');
  e.preventDefault();
  });
});