CSS上下文onclick菜单可在切换时更改z索引，以允许覆盖的空间进行交互

Question

以下机制允许创建一个下拉菜单，该菜单仅在切换可见性时单击时显示。

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;
}

这是放置在一个标题容器

#admin-header_container { 
position: fixed; 
width: 100%; 
height: 40px; 
top: 0px; 
z-index: 100;
}

其中

<div id='admin-header_container'>
<button><%= I18n.locale %></button>
<nav class='dd_menu'>
<ul class='ul_dd_menu_lang'>
<% I18n.available_locales.each do |locale| %>
<% next if locale == I18n.locale %>
<li  class='dd_item'><%= link_to locale.to_s, url_for( request.params.merge(locale: locale)), class: 'locale' %>
</li>
<% end %>
</ul>
</nav>
</div>

主容器及其内容从标题下方开始，但在滚动时会滑到标题下方

#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; 
}

然而，这意味着无论dd_menu的高度是多少，该高度都将由父值继承，并"覆盖"该高度内的任何内容，从而使那里的对象不可点击。

这个jsfiddle复制了这个问题。让检查器显示无序列表为活动列表有点棘手，但仍然选择<div class='cell small-2'>显示父元素的高度为105，包括所有ul组件

因此z-index是问题属性。如何处理此问题以使管理内容完全交互？

Answer 1

事实证明z索引没有发挥作用，包装类保持其位置。#admin-header_container{z指数：100；}然而，切换能见度的诀窍是转移注意力；正确的方法是调用display并在active类上切换该值。

.dd_menu {
/*     visibility: hidden; */
display: none;
}
button:focus + .dd_menu {
/*    visibility: visible; */
display: inline; 
}
button + .dd_menu:active {
/*   visibility: visible;  */ 
display: inline;
}

有问题的jsfiddle引用被调整为允许在伪类的两个实例之间切换。