title: Secondary Navigation/Menu bar that pushes web content down on hover of primary navigation button
body: <p>I am trying to create a simple navigation menu that when you click on one of the buttons, a secondary menu pops up below, but pushes the content below down with a sliding action. </p>
  
  <p>There will be 6 buttons in the primary menu, spanning the width of the containing div at 960px. Then when you hover on "Products" only, every other primary button will go to a new page, this should open a secondary nav that spans 2 lines. Each button is 159px.</p>
  
  <p>Here is my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="menu"&gt; 
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="index.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
              &lt;li id="products"&gt;&lt;a href="#"&gt;Products&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="suppliers.html"&gt;Our Suppliers&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="findus.html"&gt;Find Us&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="deliveries.html"&gt;Deliveries&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="contactus.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
       &lt;div id="subMenu"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="winesandspirits.html"&gt;Wine &amp;amp; Spirits&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="beersandciders.html"&gt;Beer &amp;amp; Ciders&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="otherdrinks.html"&gt;Other Drinks&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="cheese.html"&gt;Cheese&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="meatsandpate.html"&gt;Meat &amp;amp; Pate&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="vegetables.html"&gt;Vegetables&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="drystores.html"&gt;Dry Stores&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="honey.html"&gt;Honey &amp;amp; Preserves&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="oliveoilandvinegar.html"&gt;Olive Oil &amp;amp; Vinegar&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="sweetthings.html"&gt;Sweet Things&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="hampers.html"&gt;Hampers&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="accessories.html"&gt;Accessories&lt;/a&gt;&lt;/li&gt;  
          &lt;/ul&gt;
      &lt;/div&gt;
  
       &lt;/div&gt;
  </code></pre>
  
  <p>And my CSS:</p>
  
  <pre><code>#menu a {
      font-family: Georgia, "Times New Roman", Times, serif;
      font-style: italic;
      letter-spacing: 1px;
      color: #fff;
      font-size: 12.5px;
      text-decoration: none;
      padding:0;
      margin: 0
  }
  #menu a:hover {
      color: #cff;
  }
  #menu {
      background: #689169;
      height:35px;
      width: 960px;
      transition:height 0.2s;
      -webkit-transition:height 0.2s;
  }
  #menu:hover {
      height: 105px;
  }
  #menu ul {
      padding: 0;
      margin: 0;
      position: absolute;
      list-style:none;
  }
  #menu ul li {
      float: left;
  }
  #menu ul li a {
      width: 159px;
      padding-top: 10px;
      padding-bottom: 10px;
      /*padding: 10px; padding-right: 30px; padding-left: 30px;*/
      margin: 0;
      background: #689169;
      text-align: center;
      border-right: 1px solid #666;
      display:block;
  }
  #subMenu {
      position: absolute;
      z-index: 1;
      margin-top: 34px;
      width: 700px;
      height: 600px;
  }
  #subMenu ul {
      position: relative;
      float: left;
  }
  #subMenu ul li {
      clear: both;
      border-right: 1px solid #666
  }
  #subMenu ul li a {
      background: none;
      border: none;
  }
  #subMenu ul li a:hover {
      color: #fff;
  }
  #outset {
      width: 700px; height: 300px;
      background: #900;    
  }
  </code></pre>
  
  <p>Here's my JSFiddle - <a href="http://jsfiddle.net/Jfdvr/1/" rel="nofollow">http://jsfiddle.net/Jfdvr/1/</a> - please help!</p>
  
  <p>Many thanks,</p>
  
  <p>Matt</p>