title: My dropdown menu doesn't push my content down?
body: <p>I created a responsive dropdown menu. When the screen gets smaller I want the dropdown menu to put the other content down. My code doesn't do that. I have tried using position: relatives/position: absolute, etc to achieve some sort of desired result, but no such luck. I have seen other similar questions pertaining to this problem but it still has not helped me.</p>
  
  <p>This is a snippet of my code.    </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $(".show-menu").click(function() {
      $("#menu").slideToggle();
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@charset "utf-8";
   * {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
  }
  /* Uporabno za Sticky footer na koncu internetne strani */
  
  html,
  body {
    height: 100%;
  }
  body {
    padding-top: 30px;
    text-align: left;
    font-size: 100%;
    font-family: "Trebuchet MD", Arial, Helvetica, sans-serif;
  }
  /* Vse kar je v glavi internetne strani oziroma slika glave */
  
  .header {
    width: 90%;
    margin: auto;
    padding-bottom: 10px;
  }
  .header img {
    width: 100%;
  }
  /* Konec glave internetne strani*/
  
  /* Vse kar je v glavnem menuju internetne strani */
  
  .full {
    background-color: #00528b;
    height: 70px;
    width: 85%;
    margin: auto;
    border-radius: 5px;
  }
  .mainheader {
    height: 70px;
    background-color: #00528b;
    border-radius: 5px;
  }
  .mainheader nav ul {
    height: 70px;
    width: 714px;
    margin: auto;
    z-index: 1000;
  }
  .mainheader nav ul ul.hidden {
    position: absolute;
  }
  /* Skrij podmenuje dokler jih ne potrebuješ */
  
  .mainheader nav ul li ul {
    display: none;
  }
  /* Oblika podmenujev */
  
  .mainheader nav ul li:hover ul li {
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    max-width: 200px;
  }
  .mainheader nav ul li:hover ul a {
    color: #000;
    font-size: 18px;
    background-color: #fff;
    padding: 5px;
  }
  /* Hover za povezave v podmenujih */
  
  .mainheader nav ul li:hover ul a:hover {
    background-color: #777;
  }
  /* Pokaži podmenuje ko je potrebno */
  
  /* + izberi vse .hidden in .hidden:hover takoj po .mainheader nav ul li a:hover */
  
  .mainheader nav ul li a:hover + .hidden,
  .hidden:hover {
    display: block;
  }
  /* Podmenuji se postavijo v vertikalo */
  
  .mainheader nav ul li ul li {
    display: block;
    float: none;
  }
  .mainheader nav ul li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
    text-align: left;
  }
  .mainheader nav ul li {
    display: inline-block;
    float: left;
  }
  .mainheader nav a:link,
  .mainheader nav a:visited {
    color: #fff;
    display: block;
    padding: 24.5px 6px 16px 5px;
    font-size: 18px;
  }
  .mainheader nav a:hover {
    color: #777;
  }
  /* Oblika show-menu in skrij ga po defoltu */
  
  .show-menu {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 18px;
    color: #fff;
    padding: 24.5px 6px 16px 5px;
    text-decoration: none;
    text-align: center;
    display: none;
  }
  /* Skrij checkbox */
  
  input[type=checkbox] {
    display: none;
  }
  /* Interaktivna menujska vrstica */
  
  @media screen and (max-width: 853px) {
    /* Prikaži show-menu oziroma menujsko vrstico */
    input[type=checkbox]:checked ~ #menu {
      display: block;
    }
    .header {
      width: 100%;
    }
    .full {
      width: 95%;
    }
    /* Podmenuji se postavijo v linijo */
    nav ul {
      display: none;
    }
    /* Oblika pod podmenujev */
    .mainheader nav ul {
      width: 100%;
    }
    .mainheader nav ul li ul.hidden li a {
      width: auto;
    }
    .mainheader nav ul li a:hover + .hidden,
    .hidden:hover {
      width: 200px;
    }
    /* Ustvari vertikalne presledke */
    nav li {
      background: #00528b;
    }
    nav li a {
      text-align: center;
    }
    /* Ustvari vse povezave v popolni širini */
    nav ul li {
      width: 100%;
      text-align: center;
    }
    nav ul li ul li {
      width: auto;
      background-color: #777;
      margin-top: 0px;
    }
    /* Pokaži 'show menu' povezave */
    .show-menu {
      display: block;
      cursor: pointer;
    }
    /* Oblika podmenuja, ki omogoča slideToggle */
    li.bottom-radius {
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
    }
    #menu {
      height: 494px;
      border-top: 1px solid #fff;
    }
  }
  /* Konec glavnega menuja internetne strani */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="full"&gt;
    &lt;header class="mainheader"&gt;
      &lt;nav id="mainheader"&gt;
  
        &lt;label for="show-menu" class="show-menu"&gt;Menijska vrstica&lt;/label&gt;
        &lt;input type="checkbox" id="show-menu" name="button"&gt;
  
        &lt;ul id="menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Domov&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Novice&lt;/a&gt;
            &lt;ul class="hidden"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Aktualno&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Arhiv&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Predstavitev&lt;/a&gt;
            &lt;ul class="hidden"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Karate zgodovina&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;O klubu&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Organi&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Dokumenti&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Člani kluba&lt;/a&gt;
            &lt;ul class="hidden"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Registrirani tekmovalci&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Vsi člani kluba&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Register pasov&lt;/a&gt;
            &lt;ul class="hidden"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Kyu pasovi&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Dan pasovi&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Trenerji&lt;/a&gt;
            &lt;ul class="hidden"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Shihan&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Sensei&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Galerija&lt;/a&gt;
            &lt;ul class="hidden"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Slike&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Posnetki&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="bottom-radius"&gt;&lt;a href="#"&gt;Sponzorji&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/header&gt;
  &lt;/div&gt; 
  &lt;div&gt;
    &lt;h1&gt;Only for preview of this exeple&lt;/h1&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I hope it's easy solution. Thanks.</p>