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

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

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


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

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

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

Заранее спасибо!
  • Вопрос задан
  • 386 просмотров
Решения вопроса 2
Exploding
@Exploding
wtf?
Вы :focus к ссылке тулите, поэтому и не работает. Точнее стиль то применяется к ней, но "подняться вверх" по дереву css не может, даже при желании.
Применяйте к li и все будут здоровы и счастливы.
Для примера что-то похожее
Ответ написан
Комментировать
JRK_DV
@JRK_DV
Рецепты https://codepen.io/jrkdv/full/LKLXdq
Если в 51 строке селектор:
.site_navigation > li:focus .site_navigation_sub {
заменить на:
.site_navigation > li a:focus + .site_navigation_sub {

Проблему не решит?
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
Не совсем ясно что же нужно, но, наверное, чтобы выпадающий блок "не терялся" при ховере?

Пример 1: https://jsfiddle.net/yu3ver/vcghvsyv/
Пример 2: https://jsfiddle.net/yu3ver/kzah26oa/
Ответ написан
Комментировать
aliencash
@aliencash
Партизан
Погуглите tabindex.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы