css - 为通过 TAB 导航选择的元素设置样式

Question

我目前有一个下拉菜单。它包含几个li，如果它有一个下拉列表，这个li包含一个ul，包含一个或几个li 又来了。

这个问题重要的部分是这个。

li ul {
    display: none;
}

li:hover > ul {
    display: block;
}

悬停效果很好。但是，我正在尝试使我的网站无需鼠标即可完全导航。在没有鼠标的情况下导航菜单的方式是使用 TAB 键，但是，我似乎无法显示下拉菜单。

我尝试使用 :hover、:active 和 :focus，这是我唯一能想到的 3 个选项。

有没有办法用纯 CSS 做到这一点？如果不是，最快的方法(页面加载时间)是什么？

Answer 1

默认情况下，您无法聚焦 li 元素，因为它在默认情况下不是交互式的，因此如果不修改 HTML，这在纯 CSS 中是不可能的。

但是，如果您将 tabindex=0 属性添加到每个顶级 li 元素:

li > ul {
  display: none;
}

li:hover > ul, li:focus > ul {
  display: block;
}

<ul>
  <li tabindex=0>Item<ul><li>Subitem</ul>
  <li tabindex=0>Item<ul><li>Subitem</ul>
  <li tabindex=0>Item<ul><li>Subitem</ul>
</ul>

不加引号，tabindex=0 每个 li 元素只有 11 个字节，如果您不喜欢不加引号的属性值，则为 13 个字节，因此对页面加载的影响应该是可以忽略不计。

请记住，使您的 li 元素可聚焦还允许它们通过鼠标单击获得焦点，因此用鼠标单击一个元素会导致其子菜单保持可见，直到它失去焦点。 You cannot prevent this with pure CSS either.