HTML,: hover css menu and accessibility

У меня вопрос.

Я создал меню css (javascript не требуется Это полагается на: hover, чтобы показать или скрыть элементы UL внутри A.

с помощью visibility: hidden; и visibility: visible;

Пока все хорошо, пока я не попробую использовать только клавиатуру.

] Теперь, чтобы быть доступным, мне нужно уметь перемещаться исключительно с помощью клавиатуры.

Поэтому я также добавил a: focus к классам, которые управляют видимостью.

Это, однако, не исправило меню, и оно остается закрытым.

Кто-нибудь знает, как это сделать чтобы мой сайт оставался доступным?

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

редактировать JSFiddle

Самая большая проблема в том, как этого добиться, чтобы они могли переходить по ссылкам ниже. Я могу сделать это только для мыши, а не только для клавиатуры.

Кто-то должен знать, как это сделать?!