Переход: активный взлом исчезает при отпускании клика

Я пытаюсь использовать переходный хак, чтобы показать div при нажатии на некоторый текст. Он работает, когда я нажимаю на него, но когда я отпускаю кнопку, она исчезает. Есть ли способ сохранить его там, когда я отпущу клик?

Пример кода здесь:

http://jsfiddle.net/tytFE/

<span><div>Click me!</div></span>
<div>
<div>
<ul>
<li><a href="#" target="_blank">Home</a></li>
<li><a href="#" target="_blank">About</a></li>
<li><a href="#" target="_blank">Skills</a></li>
<li><a href="#" target="_blank">Portfolio</a></li>
<li><a href="#" target="_blank">Blog</a></li>
<li><a href="#" target="_blank">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;
}
1 ответ

После отпускания элемента элемент не остается в активном состоянии. Вместо этого вам нужно использовать селектор для состояния переключения, например :checked, для которого требуется флажок или переключатель.

<label for="checkme">Check me!</label>


:checked ~ .menu {
 display: block;
}

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

licensed under cc by-sa 3.0 with attribution.