JSFiddle (The *:focus rule is to illustrate which element is marked as having focus.)
What I’m wondering is why, when I click a menu item, it gets the focus… but clicking a menu item does not give it focus.
What’s wrong with the CSS to make it behave this way?
focusis generally only for elements that can receive keyboard or other input, so by this heuristiclis don’t qualify. This question has more about it..In the specs, CSS doesn’t explicitly define what elements can be in those states, so it’s hard to come up with a set rule for what can and can’t be set to
focus.What might work for your purposes is
active, which you can view here.