过渡:释放点击时主动黑客消失

Question

我正在尝试使用过渡技巧在单击某些文本时显示div。当我单击它时它可以工作，但当我释放按钮时它会消失。当我释放点击时，有什么方法可以保持它在那里吗？

此处的示例代码：

http://jsfiddle.net/tytFE/

<span><div class="menu-button">Click me!</div></span>
<div class="menu">
<div class="container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>

.CSS

.menu {
transition: all 0s 9999999s !important;
display:none;
position:fixed;
top:0;
left:0;
background:#222;
padding:20px 0 20px 0;
margin:0 auto;
width:100%;
z-index:999;
text-transform:uppercase;
text-align:center;
font-size:20px;
}
.menu a {
color:#999;
font-weight:300;
width:16%;
-webkit-transition: all 1s ease;
 -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
      transition: all 1s ease;
}
.menu a:hover {
color:#258ace;
font-weight:300;
text-decoration:none;
}
span:active ~ .menu {
transition: all 0s !important;
display:inline;
position:fixed;
top:0;
left:0;
background:#222;
padding:20px 0 20px 0;
margin:0 auto;
width:100%;
z-index:999;
text-transform:uppercase;
text-align:center;
font-size:20px;
}
.menu-button {
position:fixed;
bottom:20px;
z-index:999;
width:100%;
text-align:center;
}
.menu ul {
list-style:none;
display:inline;
margin:0;
}
.menu li {
list-style:none;
display:inline;
margin:0;
margin: 0 5px 0 5px;
}

Answer 1

释放单击后，元素不会保持活动状态。 相反，您需要使用可切换状态的选择器，例如 :checked ，这将需要复选框或单选按钮。

<label for=checkme>Check me!</label>
<input id=checkme type=checkbox>
:checked ~ .menu {
    display: block;
}

http://jsfiddle.net/tytFE/1/