title: Dropdown menu to display over DIV
body: <p>I am trying to create a simple CSS dropdown menu, the function is correct but I am having issues when I place it inside a holding DIV. The menu expands  inside the DIV and adds scrolling bars.</p>
  
  <p>I have tried hiding the overflow and positioning the elements but it  has no effect:</p>
  
  <p><strong><a href="http://jsfiddle.net/TJTR/bnbb8dhk/1/" rel="nofollow"><code>JSFIDDLE</code></a></strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body
  {
      font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      padding: 20px 50px 150px;
      font-size: 13px;
      text-align: center;
  }
  .dropdown
  {
      text-align: left;
      display: inline;
      margin: 0;
      padding: 0px 4px 0px 0px;
      list-style: none;
  }
  .dropdown li
  {
      font: bold 12px/18px sans-serif;
      display: inline-block;
      margin-right: -4px;
      position: relative;
      /*padding: 15px 20px;*/
      background: #fff;
      cursor: pointer;
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      -ms-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s;
  }
  .dropdown li:hover
  {
      background: #555;
      color: #fff;
  }
  .dropdown li ul
  {
      padding: 0;
      position: absolute;
      top: 18px;
      left: 0;
      width: 150px;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      display: none;
      opacity: 0;
      visibility: hidden;
      -webkit-transiton: opacity 0.2s;
      -moz-transition: opacity 0.2s;
      -ms-transition: opacity 0.2s;
      -o-transition: opacity 0.2s;
      -transition: opacity 0.2s;
  }
  .dropdown li ul li
  { 
      display: block; 
      color: #000;
      padding-bottom: 5px;
  }
  .dropdown li ul li:hover
  {
      background: #666;
  }
  .dropdown li:hover ul
  {
      display: block;
      opacity: 1;
      visibility: visible;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.08), 1px 1px 4px rgba(255, 255, 255, 0.08) inset;border: 1px solid #DDD; overflow: auto; background-color: #FFF; text-align: center; border-radius: 10px; width:100%; height:50px;"&gt;
      &lt;ul class="dropdown"&gt;
          &lt;li&gt;Section1
              &lt;ul&gt;
                  &lt;li&gt;Link&lt;/li&gt;
                  &lt;li&gt;Link&lt;/li&gt;
                  &lt;li&gt;Link&lt;/li&gt;
                  &lt;li&gt;Link&lt;/li&gt;
                  &lt;li&gt;Link&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>