How to stop dropdown menu from pushing content down?

Question

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:[email protected]" target="_blank">CONTACT ME</a></li>
  </ul>

</nav>

JS Fiddle

Kneehole

Here is the link to the jsfiddle: jsfiddle.net/Thinkgraser/t2ogvLps/10 – Kneehole

Please edit your question to include that link – Ludwog

Answer 1

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.

Southport

Answer 2

you should add following css to your code

nav ul li {
  position:relative;
}
//add class on sub-menu(.drop-down)
.drop-down{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:1;
}
//z-index value set as your needs

Itinerary

Answer 3

Make your dropdown menu's position: absolute; and then the element under it as position: relative;.

If this doesn't work, try to make both the dropdown menu and the element under it as position: absolute; and then set the z-index of the dropdown as higher than the element below it.

I made the dropdown and the element under it positioned absolute (both of them), and it worked. The dropdown menu is now ignoring the element under it.

Arella