title: Navigation submenu push a div below down (Responsive)
body: <p>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:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>        .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;
  
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="navigationMenu"&gt;
    &lt;label for="show-menu" class="show-menu"&gt;SHOW MENU&lt;/label&gt;
    &lt;input type="checkbox" id="show-menu" role="button"&gt;
    &lt;ul id="menu"&gt;
      &lt;li&gt; &lt;a href="#"&gt; LINK 1 &lt;/a&gt; 
      &lt;/li&gt;
      &lt;li&gt; &lt;a href="#"&gt; LINK 2 &lt;/a&gt;
  
        &lt;ul class="hidden"&gt;
          &lt;li&gt; &lt;a href="#"&gt; SUB LINK 1 &lt;/a&gt; 
          &lt;/li&gt;
          &lt;li&gt; &lt;a href="#"&gt; SUB LINK 2 &lt;/a&gt; 
          &lt;/li&gt;
          &lt;li&gt; &lt;a href="#"&gt; SUB LINK 3 &lt;/a&gt; 
          &lt;/li&gt;
          &lt;li&gt; &lt;a href="#"&gt; SUB LINK 4 &lt;/a&gt; 
          &lt;/li&gt;
          &lt;li&gt; &lt;a href="#"&gt; SUB LINK 5 &lt;/a&gt; 
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt; &lt;a href="#"&gt; LINK 3 &lt;/a&gt; 
      &lt;/li&gt;
      &lt;li&gt; &lt;a href="#"&gt; LINK 4 &lt;/a&gt;
  
        &lt;ul class="hidden"&gt;
          &lt;li&gt; &lt;a href="#"&gt; SUB LINK 1 &lt;/a&gt; 
          &lt;/li&gt;
          &lt;li&gt; &lt;a href="#"&gt; SUB LINK 2 &lt;/a&gt; 
          &lt;/li&gt;
          &lt;li&gt; &lt;a href="#"&gt; SUB LINK 3 &lt;/a&gt; 
          &lt;/li&gt;
          &lt;li&gt; &lt;a href="#"&gt; SUB LINK 4 &lt;/a&gt; 
          &lt;/li&gt;
          &lt;li&gt; &lt;a href="#"&gt; SUB LINK 5 &lt;/a&gt; 
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="floatClear"&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, vidit adhuc quidam mea eu, his magna sapientem eloquentiam cu.&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>RESPONSIVE</p>
  
  <pre><code>@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;}
  }
  </code></pre>
  
  <p>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 <a href="http://jsfiddle.net/k82tden1/14/" rel="nofollow">enter link description here</a>. Any ideas? Many thanks!</p>