Dropdown menu collapses inside the navbar when screen is smaller - css

Question

Click here for the view
As you can see, I'm having problem with the dropdown. It works fine when screen is bigger than 768px (which is the width I set on the media query) but when the screen width is now equal or less than 768px, the dropdown menu does not shows outside the navigation instead it collapses inside the navigation bar. Please look at the picture to see what happens.
I already tried z-index, position property etc, but not one works.
How can I make the dropdown menu show outside of the navigation bar instead of collapsing inside it?
Here is my HTML for nav:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a id="sidebarCollapse" href="#" data-toggle="offcanvas"><i class="fa fa-navicon fa-2x"></i></a>
</div>
<div id="navbar-right">
<ul class="nav navbar-nav navbar-right">
<li>Logout 2</li>
<li>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</nav>
Here's the CSS, I only included the CSS on the media query since there's no problem on the screen size except when it reach 768px or below. Also the view on the picture has no CSS for the dropdown, so it's the actual dropdown without any styling:
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#content {
width: 100%;
}
#content.active {
width: calc(100% - 250px);
}
.container-fluid {
display: inline-flex;
overflow: hidden;
width: 100%;
height: 100%;
position: absolute;
padding: 0;
margin: 0;
}
.container-fluid #navbar-right {
width: 100%;
}
.container-fluid ul {
display: inline-flex;
float: right;
}
ul.nav {
height: 100%;
margin: 0;
}
.navbar {
padding: 0;
margin: 0;
}
.navbar-header a i {
margin-left: 15px;
}
.navbar-right li a {
height: 100%;
line-height: 30px;
}
/****/
ul.dropdown-menu {
}
}

Answer 1

Remove the overflow hidden from the container-fluid class:
.container-fluid {
display: inline-flex;
width: 100%;
height: 100%;
position: absolute;
padding: 0;
margin: 0;
}
Add the overflow:hidden to the dropdown class:
.dropdown {
overflow:hidden;
}
Codepen link: https://codepen.io/anon/pen/mpEjXq?editors=1100