the focusable dropdown

We need to hide the dropdowns in a way that doesn't render them unfocusable. There are several ways to do this but my personal favourite is the following:

li ul {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
}
li:hover ul,
li.focus ul {
    clip: auto;
}

Using the clip property we reduce our dropdowns to effectively zero width and height, then when the .focus class is applied to the parent <li> we turn it to auto, giving it back its original width and height. And that's it! The menu is now keyboard navigable on all known browsers.