title: Drop down menu to push out div below
body: <p>I need some assistance with a drop down menu. I have created a demo to show what I have.</p>
  
  <p><a href="http://jsfiddle.net/MRhR2/1/" rel="nofollow">Demo Fiddle</a></p>
  
  <p>I need some advice on why the menu isn't pushing down the contents below. I am trying to create a button that sits over the div and when pushed the menu pushes the div down to reveal the menu list. and the button to still be sat on top of the div but below the menu.</p>
  
  <pre><code>&lt;div id="nav-mobile"&gt;
      &lt;a href="#"&gt;Menu&lt;/a&gt;
      &lt;ul style="display: none;"&gt;
          &lt;li&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Why Us&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Our Work&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Our Equipment&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Video Production&lt;/a&gt;&lt;/li&gt;
          &lt;li id="last-child"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  
  
  
  &lt;!-- First Section --&gt;
  
  &lt;div id='imgDiv'&gt;
      &lt;div&gt; 
          &lt;div class="containeralt"&gt;
              &lt;img src="img/allthingslogo.gif" /&gt;
              &lt;br&gt;&lt;br&gt;&lt;br&gt;
              &lt;h1 style="font-weight: 100; border: none; font-size: 27px; line-height: 57px; max-width: 800px; margin: 0 auto;"&gt; and the web.&lt;/h1&gt;
              &lt;br /&gt;&lt;br&gt;&lt;br /&gt;&lt;br&gt;
              &lt;a href="#imgDiv2"&gt;&lt;span class="icon lush-arrow-circle-down" style="font-size: 50px; color: #FFFFFF;"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  
      $(document).ready(function() {
  
      $('#nav-mobile ul').hide();
      $('#nav-mobile').click(function(e) {
          e.preventDefault();
          $('#nav-mobile ul').slideToggle();
      });
  });
  </code></pre>