css только. Нажмите на li, покажите вложенные ul и li. Отпустите кнопку мыши, необходимо продолжить показывать вложенные ul и li

Question

Если я нажимаю на навигацию a hrefli хочу отобразить подкатегории ближайшего более глубокого уровня (ul и li). Хотите сделать все с помощью css (не хотите использовать jquery).

Используя пример здесь http://bonrouge.com/br.php?page=cssonclickswitch

В примере, если нажмите на ссылку, отображать определенное изображение.

Модифицированный пример (здесь живут пример http://jsfiddle.net/w83ob3Lh/5/)

<ul id="cssonclickswitch" class=""> 

<li><a href="#n">Wine 
<span><img alt="wine" height="50" width="50"></span></a> 
    <ul class=""> 
    <li><a href="#">Option One 1-1</a> </li> 
    <li><a href="#">Option One 1-2</a> </li> 
    </ul> 
</li> 

</ul> 

И CSS это

#cssonclickswitch a span, #cssonclickswitch ul li {display: none;} 

#cssonclickswitch a:active span, 
#cssonclickswitch a:focus span, 
#cssonclickswitch :active ul li, 
#cssonclickswitch :focus ul li 
{ 
display: block; 
/*position: absolute;*/ 
position: relative; 
top: 0; 
left: 0px; 
width: 50px; 
color:red; 
background:#fff; 
} 

Так на странице загрузки #cssonclickswitch ul li {display: none;} Это нормально.

Если нажмите на ссылку и удерживайте нажатой кнопки мыши в разделе «подкатегорию»

Option One 1-1 
Option One 1-2 

Проблема. Если отпустите кнопку мыши, то я смогу увидеть изображение (это нормально), но подкатегория исчезает (не нормально).

Как сохранить/показать подкатегории, если кнопка мыши отпущена (после нажатия на ссылку)?

Answer 1

Добавить #cssonclickswitch a:focus ~ ul li Обновлено вашу скрипку:

http://jsfiddle.net/w83ob3Lh/6/