title: CSS Menu Drop down expanding Div Container
body: <p>Having problems with my CSS menu drop-down as instead of overlapping the containers its expanding them. Probably very simple oversight but can't find the answer (closest match was <a href="https://stackoverflow.com/questions/14157457/div-within-li-not-expanding">Div within li not expanding</a> but the suggestion of putting an absolute position to the submenu class didn't work). Also there is no JS.</p>
  
  <p>Here is the JSFiddle Link : <a href="http://jsfiddle.net/KNBLC/" rel="nofollow noreferrer">http://jsfiddle.net/KNBLC/</a> </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="secondary-content-6col"&gt;
       &lt;h1&gt;&lt;span class="white"&gt;Headline&lt;/span&gt;&lt;/h1&gt;
  
      &lt;ul class="yellow-call-to-action"&gt;
          &lt;li&gt;&lt;a href="#"&gt;1. Select a Product &lt;img src="../img/arrow-small.png" alt="arrow"/&gt;&lt;/a&gt;
  
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Item 3&lt;/a&gt;
  
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;!--- 1st column Footer --&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>