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

Question

我正在尝试制作一个可通过键盘访问的菜单，但我不知道如何让它显示焦点下拉菜单。

我有

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

问题是，当它聚焦于嵌套在 li 中的 a 而没有显示 ul 时。制表符专注于 a 标签。

这是我的完整代码:http://jsfiddle.net/bxpe4/

Answer 1

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

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

focus-within 伪类不仅关心当前元素，还关心它的所有子元素。我认为这是解决此问题的一个非常干净的解决方案，并且对我的问题有效。