another approach to focus styling

Outlines are not the only way to go for focus styles. You probably already have some styles for the hover state; these can easily be adopted for focus too. That will give mouse and keyboard navigators a consistent experience.

.nav li a:hover,
.nav li a:focus {
    background-color: #23527c;
    color: #fff;
}

If you tab through the navigation above, you'll see now the hover styles are also being applied on focus. But what about the dropdowns? There's still not showing. We'll have a look at that in the next section.