Я создал простое меню suckerfish в CSS, где подменю будет отображаться, когда пользователь нажимает на основной элемент.CSS click suckerfish menu не остается открытым в chrome
Markup:
<div class="bodywrapper">
<a class="button" href="#"></a>
<ul class="menu">
<li>test test test</li>
<li>test test test test test test test test test test test test test test test</li>
</ul>
</div>
CSS:
.button{
display: block;
background-color: red;
width: 10px;
height: 27px;
}
.button:focus +ul, .button:active +ul{
display: block;
}
.menu{
display: none;
border: 1px black solid;
}
.menu:hover{
display: block;
}
скрипку мой код здесь: http://jsfiddle.net/pLgLj/
меню работает должным образом в Firefox и IE, когда красный квадрат кликнули , меню отображается до тех пор, пока мы не перейдем в другое место. Тем не менее, в хроме, меню отображается только тогда, когда красный квадрат щелкнут и удерживается нажатой.
Я утерян относительно того, что может быть причиной этого. Может ли кто-нибудь просветить меня?
Примечание: Я хочу сделать это только с чистым CSS и без javascript.