title: CSS z-index doesn't respond properly - submenu hidden underneath content
body: <p>I created a header ribbon menu (horizontal menu on top of page), that when hovering on its links, a sub-menu opens for each of them, that should display on top of the main content.</p>
  
  <p>The problem is the sub-menu gets rendered underneath the main-content.</p>
  
  <p>I tried setting a higher value for the sub-menu <code>z-index</code>, but that didn't help.</p>
  
  <p>When I set the main content's <code>z-index</code> to <code>-1</code> (<code>0</code> doesn't work either), the sub-menu shows up, but then all the buttons in the content doesn't work.</p>
  
  <p>I search my entire CSS and there is not even one <code>z-index</code> assignment.</p>
  
  <p><strong>Update</strong></p>
  
  <p>The content div is styled:</p>
  
  <pre><code>#content {
    background: #fff;
    position: absolute;
    top: 176px;
    bottom: 25px;
    padding: 20px 0px 63px;
    overflow: hidden;
  }
  </code></pre>