Показ блока, с помощью css селектора :focus — возможно ли?

Question

[Некто Нектович]

Всем доброго времени суток!

Задача состоит в следующем: проходя по навигации табом, сделать так, чтобы открывалось подменю.
В следующем примере
сделала попытку реализовать это только средствами css, через псевдокласс :focus (51-ая строка в коде)
Однако это не работает.
Выдача гугла гласит, что это можно решить:

• средствами js
• используя соседний селектор
  

Второй вариант соответственно не подходит, так как в примере блоки вложены.

В связи с чем, есть следующие вопросы:
1. Почему css правило на 51 строке не работает?
2. Возможно ли решить эту задачу средствами css?

P.S. Заморочилась над этой темой, после прочтения статей про доступность интерфейсов. Можете ли что-то посоветовать почитать/посмотреть на эту тему?

Заранее спасибо!

Answer 1

[Exploding]

Вы :focus к ссылке тулите, поэтому и не работает. Точнее стиль то применяется к ней, но "подняться вверх" по дереву css не может, даже при желании.
Применяйте к li и все будут здоровы и счастливы.
Для примера что-то похожее

Answer 2

[ⓒⓢⓢ]

Если в 51 строке селектор:
.site_navigation > li:focus .site_navigation_sub {
заменить на:

.site_navigation > li a:focus + .site_navigation_sub {

Проблему не решит?

Answer 3

[Alexandr Alexandrov]

Не совсем ясно что же нужно, но, наверное, чтобы выпадающий блок "не терялся" при ховере?

Пример 1: https://jsfiddle.net/yu3ver/vcghvsyv/
Пример 2: https://jsfiddle.net/yu3ver/kzah26oa/

Answer 4

[Андрей Федоров]

Погуглите tabindex.