How to stop dropdown menu from pushing content down?

I was wondering if someone could help me make it so that the content does not drop down without it messing the sub menu up. I tried changing the sub menu to position: absolute but that just messed up the sub menu and I also tried z-index: 2 and that didn't help. The only other idea I would have to fix it is to somehow apply something like the position: absolute to the text but, I am not sure how to do that. If anyone could help me I would greatly appreciate it

Snippet for the Menu code

<nav>

  <label for="drop" class="toggle" style="
    background: rgba(0, 0, 0, .5);
    Line-height: 34px;

">Menu</label>

  <input type="checkbox" id="drop" />
  <ul class="menu">


    <li><a href=index.html>HOME</a></li>
    <li>
      <!-- First Tier Drop Down -->
      <label for="drop-1" class="toggle">VIDEOS</label>
      <a>VIDEOS</a>
      <input type="checkbox" id="drop-1" />
      <ul>

        <li><a href=page4.html>Videos 2018</a></li>
        <li><a href=page1.html>Videos 2017</a></li>
        <li><a href=page2.html>Videos 2016</a></li>
        <li><a href=page3.html>Videos 2015</a></li>

      </ul>

    </li>

    <li>

      <!-- First Tier Drop Down -->
      <label for="drop-2" class="toggle">SOCIAL MEIDA</label>
      <a>SOCIAL MEDIA</a>
      <input type="checkbox" id="drop-2" />
      <ul>
        <li><a href="https://www.youtube.com/channel/UCuH1ykeHHrcOGWOCy_RfY6w/" target="_blank">Youtube</a></li>

        <li><a href="https://discordapp.com/channels/514497644316590080/514497644316590083" target="_blank">Discord</a></li>

        <li><a href="https://twitter.com/thinkgraser" target="_blank">Twitter</a></li>

        <li><a href="https://www.facebook.com/profile.php?id=100005901856481" target="_blank">Facebook</a></li>

        <li><a href="https://www.instagram.com/cgwemer/?hl=en" target="_blank">Instagram</a></li>
      </ul>
    </li>
    <li><a href="mailto:thinkgrazer@gmail.com" target="_blank">CONTACT ME</a></li>
  </ul>

</nav>

JS Fiddle

Add this piece of css at the end of your style file

    nav ul li {
        position: relative;
    }

    nav ul ul {
        position: absolute;
        width: 100%;
    }

For sub-menu to not push the content down it needs to have position: absolute style. Other bits of css is to fix the styling and sub-menu width.