title: Dropdown menu hidden behind content on page?
body: <p>I'm attempting to make a navbar as an exercise but I got stuck. I have a navbar of height x and a inline-block nav-menu of variable height that contains a nav-button block of height x and nav-dropdown block of variable height. The overflow on the nav-menu is hidden (which is the nav-dropdown) until there is a hover over it.</p>
  
  <p>The problem is when the nav-dropdown appears, it is behind the content on the page.</p>
  
  <p>I attempted to add z-index to every single element including the top most parent to no avail.</p>
  
  <p>Please see js-fiddle: <a href="http://jsfiddle.net/wek84cx7/" rel="nofollow">http://jsfiddle.net/wek84cx7/</a></p>
  
  <p>The navbar configuration is below (presumably one would have multiple nav-menus):</p>
  
  <pre><code>&lt;div class="navbar" style="z-index: 999;"&gt;
  
      &lt;div class="nav-menu" style="z-index: 999;"&gt;
          &lt;div class="nav-button" style="z-index: 999;"&gt;
              &lt;div class="vertical-align-helper"&gt;&lt;/div&gt;
              &lt;span style="vertical-align: center;"&gt;Hello World&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="nav-dropdown" style="z-index: 999;"&gt;
              &lt;ul style="z-index: 999;"&gt;
                  &lt;li style="z-index: 999;"&gt;onee&lt;/li&gt;
                  &lt;li style="z-index: 999;"&gt;twot&lt;/li&gt;
                  &lt;li style="z-index: 999;"&gt;threeo&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>