用CSS正确显示焦点下拉的方法

Question

我想制作一个适用于键盘的菜单，但我不知道如何在焦点上显示下拉菜单。

我已经：

.main-menu li:hover ul,
.main-menu li:focus ul {
    display: block;
}

问题在于，当它聚焦到嵌套在li中的a上时，它只会显示ul。按tab键时将聚焦在a标签上。

以下是完整代码：http://jsfiddle.net/bxpe4/

- kel

---

重点应该放在锚标签上（作为实际的交互元素），而不是列表项。 - Diodeus - James MacFarlane

这不是一个“问题”，这是浏览器关注锚点标签的非常好的一件事情。 - Milche Patern

Answer 1

在这里可能会有用的另一个属性是:focus-within。如果您执行以下操作，则应该也有效。

.main-menu li:hover ul,
.main-menu li:focus-within ul {
    display: block;
}

focus-within 伪类不仅关心当前元素，而且还关心其所有子元素。我认为这是一个相当干净的解决方案，并且它适用于我的问题。

- Jon

---

只要你不使用微软浏览器，这是一个很好的解决方案。 - Felix Eve

Answer 2

当使用 Tab 键时，焦点会聚集在 .main-menu li 中的 anchor 上，而不是 list-item 本身。

有两种解决方法：

a) 使用 + 选择器

.main-menu li a:focus + ul {
    display: block;
}

然而，这使得切换到其他锚点变得有问题（在按下选项卡时，它应该转到子菜单中的第一个锚点，但它被隐藏了，所以什么也没有发生）。

b) 使用 tabindex 属性

这需要您将菜单锚点的 tabindex 设置为负值（从选项卡中移除它们），并将选项卡设置为列表项。

查看使用 tabindex 演示

您需要更改锚点和列表项的样式以显示红色背景，添加一个新的选择器：

.main-menu li a:hover,
.main-menu li a:focus,
.main-menu li.dropped > a,
.main-menu li:focus > a /* this one was added */ {
    /* your styles */
}

然而，这并不是一个好习惯，因为专注于列表项意味着您无法使用键盘访问锚点。您可以使用JavaScript模拟事件（将列表项的keypress绑定到单击锚点），在jQuery中，它应该是这样的：

$('li[tabindex]').on('keypress', function() {
    $(this).find('a').click();
});

查看使用tabindex和事件模拟演示

如果顶级锚点没有任何操作（仅用于下拉目的），则这不是问题，在这种情况下，您根本不需要它们。

- Jakub Kotrs