title: Dropdown menu keeps skipping away
body: <p>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.</p>
  
  <p>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. </p>
  
  <p>So in proper words, my navigation is fine till you hover over one with a dropdown menu then it replaces himself. </p>
  
  <p>I included a <strong><a href="https://jsfiddle.net/r3gra7ta/1/" rel="nofollow">JSFIDDLE</a></strong> to show you what i mean. There is a dropdown menu under the second link in the main navigation.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="header"&gt;
    &lt;div class="blueborder"&gt;
    &lt;/div&gt;
    &lt;section class="nav"&gt;
      &lt;div class="row"&gt;
        &lt;ul class="main-nav" id="drop-nav"&gt;
          &lt;li class="home-active"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt; / &lt;/li&gt;
          &lt;div class="dropdown"&gt;
            &lt;li&gt;&lt;a href="familiebedrijf.html"&gt;Over Ons&lt;/a&gt;&lt;/li&gt;
            &lt;div class="dropdown-content"&gt;
              &lt;li&gt;&lt;a href="betuigenissen.html"&gt;Betuigenissen&lt;/a&gt;&lt;/li&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;li&gt; / &lt;/li&gt;
          &lt;li&gt;&lt;a href="schilderwerken.html"&gt;Schilderwerken&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt; / &lt;/li&gt;
          &lt;li&gt;&lt;a href="behangwerken.html"&gt;Behangwerken&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt; / &lt;/li&gt;
          &lt;li&gt;&lt;a href="raamdecoratie.html"&gt;Raamdecoratie&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt; / &lt;/li&gt;
          &lt;li&gt;&lt;a href="realisaties.html"&gt;Realisaties&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt; / &lt;/li&gt;
          &lt;li&gt;&lt;a href="contact.html"&gt;Contacteer ons&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.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;
  }
  </code></pre>