title: CSS contextual onclick menu to change z-index when toggled to allow covered space to be interactive
body: <p>The following mechanism  allows the creation of a drop-down menu that appears only when clicked on as its visibility is being toggled.</p>
  <pre><code>button + .dd_menu:active,
  button:focus + .dd_menu {
      visibility: visible;
  }
  .ul_dd_menu_lang {
    background-color: rgba(255,255,255,0.89); 
    border: 1px solid rgba(169,156,156,0.45);
    padding-left: 7px;
    padding-top: 7px;
  }
  </code></pre>
  <p>This is being placed in a header container</p>
  <pre><code>#admin-header_container { 
    position: fixed; 
    width: 100%; 
    height: 40px; 
    top: 0px; 
    z-index: 100;
  }
  </code></pre>
  <p>where</p>
  <pre><code>&lt;div id='admin-header_container'&gt;
      &lt;button&gt;&lt;%= I18n.locale %&gt;&lt;/button&gt;
      &lt;nav class='dd_menu'&gt;
        &lt;ul class='ul_dd_menu_lang'&gt;
        &lt;% I18n.available_locales.each do |locale| %&gt;
          &lt;% next if locale == I18n.locale %&gt;
          &lt;li  class='dd_item'&gt;&lt;%= link_to locale.to_s, url_for( request.params.merge(locale: locale)), class: 'locale' %&gt;
          &lt;/li&gt;
        &lt;% end %&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The main container and its content starts below the header, but will slide underneath it upon scrolling</p>
  <pre><code>#admin-container { 
    width:100%;
    display: table;
    margin-top:60px;
    padding-bottom:60px;
    *zoom:1;
    position: absolute;
    z-index: 10;
  }
  #admin-content{
    margin:0 auto;
    padding: 0 7px 0 7px; 
  }
  </code></pre>
  <p>However, this means that whatever the height of the <code>dd_menu</code>, that height will be inherited by the parent value and 'cover' any contents within that height, rendering objects there unclickable.</p>
  <p><a href="https://jsfiddle.net/dvo4/k3saeung/11/" rel="nofollow noreferrer">This jsfiddle replicates</a> the issue.  A bit tricky to get the inspector to reveal the unordered list as active, but still selecting the <code>&lt;div class='cell small-2'&gt;</code>  shows how the parent element has a height of 105, encompassing all <code>ul</code> components</p>
  <p>Thus the <code>z-index</code> is the problem attribute. How can this be handled to have the  admin-content fully interactive?</p>