title: Fixed header on scroll but submenu needs to push content down
body: <p>I need a fixed header for the level1 menu, but the submenu needs to push the rest of the page down when clicked on level1.</p>
  
  <p>If I make the header position fixed obviously the content will not be pushed down and the submenu will overlap the content (as well as the menu). </p>
  
  <p>How do people usually solve this issue? Thanks!</p>
  
  <p><a href="http://jsfiddle.net/L3xh3av1/" rel="nofollow">http://jsfiddle.net/L3xh3av1/</a></p>
  
  <p>js:</p>
  
  <pre><code>$(".menu").on("click",function(){
  $(".submenu").slideToggle();
  })
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="page"&gt;
    &lt;div class="header"&gt;
      &lt;div class="menu"&gt;menu&lt;/div&gt;
      &lt;div class="submenu"&gt;submenu&lt;/div&gt;
    &lt;/div&gt;
      &lt;div class="content"&gt;
          &lt;p&gt;content needs to be pushed down&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.header{
      height:200px;
      background:red;
      position:fixed;
      width:100%;
  }
  .menu{
      height:70px;
      background:blue;
  }
  .submenu{
      height:70px;
      background:yellow;
      display:none;
  }
  .content{
      background: purple;
      height:300px;
      width:100%;
  }
  .content p{
      color:black;
  }
  .page{
      height:3000px;
  }
  </code></pre>