Stackoverflow Question

Dropdown link -> dropdown menu always lies below other dropdown.

HTML

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!doctype html>
<html>

<head>
 	<title>test</title>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
	<a class="navbar-brand" href="https://www.test.com"><img class="logoklant" src="images/test.png" alt="Logo"></a>
	<a class="navbar-brand naamdashboard" href="#">test</a>
	<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    	<span class="navbar-toggler-icon"></span>
  	</button>
 	
  	<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
		<ul class="navbar-nav ml-auto menuitems" id="myNavbar">
			<li class="nav-item"><a class="nav-link" href="#page1">Link 1</a></li>
		    <li class="nav-item"><a class="nav-link" href="#page2">Link 2</a></li>
		    <li class="nav-item dropdown">
		      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
		        Dropdown link
		      </a>
		      <div class="dropdown-menu">
		        <a class="dropdown-item" href="#test1">Link 1</a>
		        <a class="dropdown-item" href="#">Link 2</a>
		        <a class="dropdown-item" href="#">Link 3</a>
		      </div>
		    </li>
			<li class="nav-item dropdown">
	          <a class="" id="filter">
	            <i class="fas fa-filter...

CSS

/* navbar */
.navbar {
  	background-color: #3b3b3b;
  	font-family: Montserrat, sans-serif;
  	font-size: 12px !important;
  	letter-spacing: 4px;
}

.navbar-brand {
	padding-top: 0px;
	padding-bottom: 0px;
	padding-right: 5px;
}

.logoklant {
	height:40px;
}

.naamdashboard {
	font: 20px;
}

.filterlogo {
	font-size: 32px;
	margin-left: 5px;
	margin-top: 2px;
	padding-right: 10px;
}

.dropdownqlik {
	height: 36px;
}

#filter.is-active + .dropdown-menu {
  display: block;
  width: 100.1%;
  top:53px;
}

.is-pos-static {
  position: static !important;
  color: white !important;
}

#CurrentSelections {
	margin-top: -8px;
	margin-left:-1px;
}

/* Scroll to top */
.scrollToTop {
	text-align: center;
	font-weight: bold;
	color: #444;
	text-decoration: none;
	position: fixed;
	top: 95vh;
	right: 1vw;
	z-index: 3000;
}

.scrollToTopLogo {
	color: black;
}

JavaScript

/* https://stackoverflow.com/questions/48243406/change-color-on-hover-and-when-navbar-toggle-is-collapsed */
$(document).ready(function(){

$("#filter").click(function(){
    $(this).parent('li').toggleClass('is-pos-static');
    $(this).toggleClass("is-active");
});



});