CSS Dropdown: Works

Why this does work?

In the HTML there is a ul whose first li item contains both the content that when clicked activates the dropdown (ie. the word Menu) and the ul which is the dropdown list.

The CSS selects the dropdown list when the li containing it is focussed. Because focus-within is used the focus is conferred to the dropdown list itself. So, when a link in the dropdown list is clicked it does not close the dropdown because it is part of the focussed entity and only clicking outside the focussed entity will take the focus away from it. Because the dropdown does not close the intended action of following the hyperlink to a new page is able to happen.

If the CSS is unaltered but the dropdown list is placed outside the li which contains the clickable entity which activates the dropdown (see sibling.html) then when a link in the dropdown is clicked the li will lose focus and so the hyperlink will not work.

If focus instead of focus-within is used then the dropdown will not be part of the focussed entity and so clicking a link in the dropdown will close the dropdown preventing the hyperlink from working.

As the links are for non-existant web pages they don't work but it can be seen that the browser is trying to connect to them.