The JS solution

There's no way around this without using a bit of JavaScript. Here goes, in jQuery flavour for ease of reading:

    .on("focus blur", function() {

What we need to do is find all the anchors inside list elements (this will apply both to the parent and child anchors in the menu) and, when their focus state changes, toggle a class on the list element that contains the dropdown. We then attach our styles to that class.

li ul {
    display: none;
li:hover ul,
li.focus ul {
    display: block;

But wait, let's try this. Depending on your browser, you may have the keyboard trap (Chrome), the dropdowns opening and closing without giving access to their child links (Firefox), or everything working as expected (Safari).

Once again, the culprit is display: none;.