Bootstrap 1-lvl dropdown menu

Bootstrap 1-lvl dropdown menu .css

.menu {
	display: flex;
	width: 100%;
}
.navbar-nav .menu-flex{
	flex-grow: 1;
	text-align:center;
	float:none;
}
.navbar-default {
  background-color: transparent;
  border: 0px;
  border-color: transparent;
  margin: 0px;
}
.navbar-default .navbar-nav>li>a {
  color: #FFF;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
  color: #FFF;
  background-color: #524ad1;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
  color: #FFF;
  background-color: #524AD1;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
  color: #FFF;
  background-color: rgb(82, 74, 209);
}
.menu-comp .dropdown.dropdown-hover-1:hover .dropdown-menu-1{
display:block;
}
.menu-comp .dropdown-hover-2:hover .dropdown-menu-2{
display:block;
}
.menu.menu-comp .dropdown-menu .sub-menu{
  top: -3px;
  border-left: 1px solid #eee;
}
.dropdown-menu>li
{	position:relative;
	-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	/* Rules below not implemented in browsers yet */
	-o-user-select: none;
	user-select: none;
	cursor:pointer;
}
.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    display:none;
    margin-top: -1px;
	border-top-left-radius:0;
	border-bottom-left-radius:0;
	border-left-color:#fff;
	box-shadow:none;
}
.right-caret:after,.left-caret:after
 {	content:"";
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    display: inline-block;
    height: 0;
    vertical-align: middle;
    width: 0;
	margin-left:5px;
}
.right-caret:after
{	border-left: 5px solid #ffaf46;
}
.left-caret:after
{	border-right: 5px solid #ffaf46;
}
.navbar-default .navbar-toggle {
  border-color: #ddd;
  z-index: 11;
}
#collapse {
  margin-top: 0px;
  width: 100%;
}
.menu .dropdown .dropdown-menu {
  padding: 0px;
  margin: 0px;
  border: 0px;
  border-radius: 0px;
  border-top: 0px;
  min-width: 220px;
  background-color: rgb(28, 22, 130);
}
.dropdown-menu>li>a {
  padding: 7px 20px;
  color: #FFF;
}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
  color: #FFFFFF;
  text-decoration: none;
  background-color: #524AD1;
}

@media only screen and (max-width: 767px) {
.menu {
  flex-direction: column;
  margin: 0px;
}
.navbar-nav .menu-flex{
	text-align:left;
}
.dropdown-menu>li>a {
  padding: 8px 17px;
  color: #FFF;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover{
  color: #FFF;
  background-color: #524ad1;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a{
	color:#fff;
}
}

Bootstrap 1-lvl dropdown menu .html

<nav class="navbar navbar-default" role="navigation">
	<button type="button" class="navbar-toggle collapsed mobile-menu-btn" data-toggle="collapse" data-target="#collapse">
		<span class="sr-only">Toggle navigation</span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
	</button>
	<div class="collapse navbar-collapse" id="collapse">
		<ul class="nav navbar-nav navbar-left menu">
			<li class="menu-flex active"><a href="#">Home</a></li>
			<li class="menu-flex dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">Activiteiten</a>
				<ul class="dropdown-menu">
					<li><a href="#">Bedrijfsuitje</a></li>
					<li><a href="#">Vrijgezellenfeest</a></li>
					<li><a href="#">Kinderfeestje</a></li>
				 </ul>
			</li>
			<li class="menu-flex dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">Boeken</a>
				<ul class="dropdown-menu">
					<li><a href="#">Bedrijfsuitje</a></li>
					<li><a href="#">Vrijgezellenfeest</a></li>
					<li><a href="#">Kinderfeestje</a></li>
				 </ul>
			</li>
			<li class="menu-flex"><a href="#">Media</a></li>
			<li class="menu-flex"><a href="#">FAQ</a></li>
			<li class="menu-flex"><a href="#">Het park</a></li>
			<li class="menu-flex"><a href="#">Contact</a></li>
		</ul>
	</div>
</nav>

Bootstrap 1-lvl dropdown menu .js

// set variable isMobile
 var isMobile = {
  //tag Android
  Android: function() {
    return navigator.userAgent.match(/Android/i);
  },
  //tag BlackBerry
  BlackBerry: function() {
    return navigator.userAgent.match(/BlackBerry/i);
  },
  //tag iOS
  iOS: function() {
    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
  },
  //tag Opera
  Opera: function() {
    return navigator.userAgent.match(/Opera Mini/i);
  },
  //tag Windows
  Windows: function() {
    return navigator.userAgent.match(/IEMobile/i);
  },
  //tag Android, BlackBerry, iOS, Opera, Windows
  any: function() {
    return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
  }
 };

 // if operating system is Android, BlackBerry, iOS, Opera, Windows run this function:
 if ( isMobile.any() ) {

 }
 // else operating system is windows or mac run this function:
 else
 {
   $(function(){
      $(".dropdown").hover(
          function() {
            $('.dropdown-menu', this).stop( true, true );
            $(this).toggleClass('open');

          },
          function() {
            $('.dropdown-menu', this).stop( true, true );
            $(this).toggleClass('open');
          });
      });
 }

Bootstrap 1-lvl dropdown menu .sass

.menu
  display: flex
  width: 100%

.navbar-nav .menu-flex
  flex-grow: 1
  text-align: center
  float: none

.navbar-default
  background-color: transparent
  border: 0px
  border-color: transparent
  margin: 0px
  .navbar-nav >
    li > a
      color: #FFF
    .active > a
      color: #FFF
      background-color: #524ad1
      &:focus, &:hover
        color: #FFF
        background-color: #524ad1
    .open > a
      color: #FFF
      background-color: #524AD1
      &:focus, &:hover
        color: #FFF
        background-color: #524AD1
    li > a
      &:focus, &:hover
        color: #FFF
        background-color: rgb(82, 74, 209)

.menu-comp
  .dropdown.dropdown-hover-1:hover .dropdown-menu-1, .dropdown-hover-2:hover .dropdown-menu-2
    display: block

.menu.menu-comp .dropdown-menu .sub-menu
  top: -3px
  border-left: 1px solid #eee

.dropdown-menu
  > li
    position: relative
    -webkit-user-select: none
    -moz-user-select: none
    -ms-user-select: none
    -o-user-select: none
    user-select: none
    cursor: pointer
  .sub-menu
    left: 100%
    position: absolute
    top: 0
    display: none
    margin-top: -1px
    border-top-left-radius: 0
    border-bottom-left-radius: 0
    border-left-color: #fff
    box-shadow: none

.right-caret:after, .left-caret:after
  content: ""
  border-bottom: 5px solid transparent
  border-top: 5px solid transparent
  display: inline-block
  height: 0
  vertical-align: middle
  width: 0
  margin-left: 5px

.right-caret:after
  border-left: 5px solid #ffaf46

.left-caret:after
  border-right: 5px solid #ffaf46

.navbar-default .navbar-toggle
  border-color: #ddd
  z-index: 11

#collapse
  margin-top: 0px
  width: 100%

.menu .dropdown .dropdown-menu
  padding: 0px
  margin: 0px
  border: 0px
  border-radius: 0px
  border-top: 0px
  min-width: 220px
  background-color: rgb(28, 22, 130)

.dropdown-menu > li > a
  padding: 7px 20px
  color: #FFF
  &:focus, &:hover
    color: #FFFFFF
    text-decoration: none
    background-color: #524AD1