Navigation submenu push a div below down (Responsive)

Question

I have created a menu with a submenu dropdown. However, the submenu works very well on a bigger screen for staying there and not pushing down but for responsive is I want is submenu pushing the div down. The following code below:

        .navigationMenu {

          clear: both;

          width: 100%;

          margin: 0 auto;

          background-color: #214c21;

        }

        .navigationMenu ul {

          list-style-type: none;

          margin: 0;

          padding: 0;

          position: relative;

          cursor: pointer;

        }

        .navigationMenu ul li {

          display: inline-block;

          position: relative;

          float: left;

          margin-right: 1px;

          cursor: pointer;

        }

        .navigationMenu li a {

          display: block;

          min-width: 140px;

          height: 50px;

          text-align: center;

          line-height: 50px;

          color: #fff;

          background: #214C21;

          text-decoration: none;

        }

        .navigationMenu li:hover a {

          background: #307030;

        }

        .navigationMenu li:hover ul a {

          background: blue;

          color: #FFF;

          height: 40px;

          line-height: 40px;

        }

        .navigationMenu li:hover ul a:hover {

          background: #307030;

          color: #fff;

        }

        .navigationMenu li ul {

          display: none;

          position: absolute;

        }

        .navigationMenu li ul li {

          display: block;

          float: none;

        }

        .navigationMenu li ul li a {

          width: auto;

          min-width: 100px;

          padding: 0 20px;

          border-bottom: 2px solid #CBE1B2;

        }

        .navigationMenu ul li a:hover + .hidden,

        .hidden:hover {

          display: block;

        }

        .show-menu {

          text-decoration: none;

          color: #fff;

          background: #214c21;

          text-align: center;

          padding: 20px 0;

          display: none;

          cursor: pointer;

        }

        .navigationMenu input[type=checkbox] {

          display: none;

          -webkit-appearance: none;

        }

        .navigationMenu input[type=checkbox]:checked ~ #menu {

          display: block;

        }

        .floatClear {

          clear: both;

        }

<div class="navigationMenu">
  <label for="show-menu" class="show-menu">SHOW MENU</label>
  <input type="checkbox" id="show-menu" role="button">
  <ul id="menu">
    <li> <a href="#"> LINK 1 </a> 
    </li>
    <li>	<a href="#"> LINK 2 </a>

      <ul class="hidden">
        <li> <a href="#"> SUB LINK 1 </a> 
        </li>
        <li> <a href="#"> SUB LINK 2 </a> 
        </li>
        <li> <a href="#"> SUB LINK 3 </a> 
        </li>
        <li> <a href="#"> SUB LINK 4 </a> 
        </li>
        <li> <a href="#"> SUB LINK 5 </a> 
        </li>
      </ul>
    </li>
    <li> <a href="#"> LINK 3 </a> 
    </li>
    <li>	<a href="#"> LINK 4 </a>

      <ul class="hidden">
        <li> <a href="#"> SUB LINK 1 </a> 
        </li>
        <li> <a href="#"> SUB LINK 2 </a> 
        </li>
        <li> <a href="#"> SUB LINK 3 </a> 
        </li>
        <li> <a href="#"> SUB LINK 4 </a> 
        </li>
        <li> <a href="#"> SUB LINK 5 </a> 
        </li>
      </ul>
    </li>
  </ul>
</div>

<div class="floatClear">
  <p>Lorem ipsum dolor sit amet, vidit adhuc quidam mea eu, his magna sapientem eloquentiam cu.</p>
</div>

RESPONSIVE

@media only screen and (min-width : 0px) and (max-width : 800px) {
.navigationMenu ul {display: none;}
.navigationMenu li {border-bottom:2px solid #CBE1B2;}
.navigationMenu ul li, li a {width: 100%;}
.show-menu {display:block;}
}

The problem is the submenu on media query are very messy. I would like to make submenu stay there and not pushing the paragraph down on the bigger screen whereas for responsive, i need the submenu to push the paragraph down. HERE IS enter link description here. Any ideas? Many thanks!

Answer 1

You need to use absolute position on the submenu add this line of code:

.navigationMenu li > ul {position:absolute;width:100%;top:100%;left:0}

Check the Updated Fiddle

To make work your responsive demo, try this:

.navigationMenu li:hover ul a {
    background: blue;
    color: #FFF;
    height: 40px;
    line-height: 40px;
    /*position:Absolute  REMOVE THIS*/
}

Add the selector for the submenu on the media query .navigationMenu li > ul:

@media only screen and (min-width : 0px) and (max-width : 800px) {

    /* MENU */
    .navigationMenu ul,.navigationMenu li > ul {position: static;display: none;}

Updated Demo

Answer 2

Add this position: absolute to .navigationMenu li ul

DEMO

.navigationMenu li ul {
   display: none;
   position: absolute;/*add this*/
}

UPDATE: to make it responsive add it in media query

.navigationMenu li ul {display: none; position: absolute}
.navigationMenu li ul li {display: block;float: none; z-index: 333}
@media (max-width: 600px) {
  .navigationMenu ul li {
    display: block;
    clear: both;
    width: 100%;
    }
}

DEMO