Dropdown menu keeps skipping away - html

Question

I am creating some websites and I am always using the same dropdown method for them. However i am stuck with my dropdown menu. When I hover on it it always replaces my main navigation and well lets say that not so customer friendly.
The problem probably lies within the position values I give in my css code but I fail to find how to make the right values for my needs.
So in proper words, my navigation is fine till you hover over one with a dropdown menu then it replaces himself.
I included a JSFIDDLE to show you what i mean. There is a dropdown menu under the second link in the main navigation.
HTML:
<div id="header">
<div class="blueborder">
</div>
<section class="nav">
<div class="row">
<ul class="main-nav" id="drop-nav">
<li class="home-active">Home</li>
<li> / </li>
<div class="dropdown">
<li>Over Ons</li>
<div class="dropdown-content">
<li>Betuigenissen</li>
</div>
</div>
<li> / </li>
<li>Schilderwerken</li>
<li> / </li>
<li>Behangwerken</li>
<li> / </li>
<li>Raamdecoratie</li>
<li> / </li>
<li>Realisaties</li>
<li> / </li>
<li>Contacteer ons</li>
</ul>
</div>
</section>
</div>
CSS:
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
text-align: center;
display: none;
position: inherit;
background-color: #2C2A26;
margin-top: 40px;
color: #000;
list-style: none;
width: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 998;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content li a {
color: #000;
border-bottom: 0px solid #ed5d00;
}
.dropdown-content li {
padding: 10px 10px;
}
.dropdown-content li a:hover {
color: #fff;
padding-bottom: 0px;
border-bottom: 0px solid #ed5d00;
}
/* Main Navi */
.main-nav {
float: left;
list-style: none;
margin-top: 0px;
padding-top: 0px;
color: #000;
font-size: 110%;
font-weight: 600;
font-family: 'Source Sans Pro', sans-serif;
}
.main-nav li {
display: inline-block;
margin-left: 1px;
color: #fff;
}
.main-nav li a {
padding: 8px 0;
color: #000;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border: 0;
}
.main-nav li a:hover,
.main-nav li a:active {
color: #8dcee6;
}

Answer 1

Change to position: absolute; on the .dropdown-content and remove the top-margin, works for me:
CSS:
.dropdown-content {
text-align: center;
display: none;
position: inherit;
background-color: #2C2A26;
color: #000;
list-style: none;
width: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 998;
}
.dropdown:hover .dropdown-content {
display: block;
position: absolute;
}
https://jsfiddle.net/r3gra7ta/2/

Answer 2

i think Your Navigation is a little bit confused.
One of simplest method is to set the submenu within the OVER ONS
<li name="OVER ONS" ><li SUBITEM1 ></li><li SUBITEM2 ></li></li>
Here a Basic Example .
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
<h1>LOGO</h1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">HOME</li>
<li>OVERONS
<ul>
<li>Betuigenissen</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
</ul>
</li>
<li>Schilderwerken</li>
<li>Behangwerken</li>
<li>Raamdecoratie</li>
<li>Realisaties</li>
<li>Contacteer ons</li>
</ul>
</nav>

Answer 3

just change the postion to "fixed" and remove margin-top in dropdown-content then it will work fine.
.dropdown-content {
text-align: center;
display: none;
position: inherit;
background-color: #2C2A26;
color: #000;
list-style: none;
width: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 998;
}