the outline thing

There are some navigation links at the top of the page, and if you hover over them you can see some dropdown menus opening below. Now try tabbing to achieve the same effect. Nothing happens, right?

No, wait, you say. I can see the link urls appearing at the bottom right hand side of the browser window. But the urls reference the current page. That means they are not really linking anywhere, and all the real links are in the dropdowns below, that we can't access with the keyboard.

So what's actually wrong here? First, the dropdowns are not getting activated by keyboard focus on those top links so we can't see or tab to the real links inside.

Second, although those top links themselves are getting focused, as we can tell by the minute indication of a url appearing at the bottom of the page, there is no visual indication of what link we are on at any moment. And for that, the culprit is often this snippet of code:

:focus {
    outline: none;

The main motivation for its use may be the inconsistency of outline styles across browsers. Chrome, Safari and Opera use thick blue outlines; Firefox and IE discreet dotted outlines. Input elements will receive these styles whenever they are being used, and sometimes buttons will stay outlined after they have been clicked.

Designers tend to get upset over these unsolicited occurrences, and the undesirable outlines get removed altogether. That's OK, as long as we define a visible focus indicator of our own.