Show block using css selector :focus - is it possible?

Question

css

Good day to all!
The task is as follows: passing through the navigation with a tab, make it so that a submenu opens.
In the following example
, I tried to implement this only with css, through the :focus pseudo-class (51st line in the code)
However, this does not work.
The google output says that this can be solved:

• js
• using adjacent selector
  

The second option is accordingly not suitable, since in the example the blocks are nested.
In this connection, there are the following questions:
1. Why does the css rule on line 51 not work?
2. Is it possible to solve this problem using css?
PS I got confused over this topic, after reading articles about the availability of interfaces. Can you recommend something to read / look at this topic?
Thanks in advance!

Answer 1

You :focus on the link, so it doesn't work. More precisely, the style is applied to it, but it cannot “climb up” the css tree, even if desired.
Apply to li and everyone will be healthy and happy.
For example, something like

Answer 2

It is not entirely clear what is needed, but, probably, so that the drop-down block is not "lost" on hover?
Example 1: https://jsfiddle.net/yu3ver/vcghvsyv/
Example 2: https://jsfiddle.net/yu3ver/kzah26oa/

Answer 3

Google tabindex.