Question

我目前有一个下拉菜单。它包含多个li，如果它有一个下拉列表，则此li包含ul，其中包含一个或多个li＆s

对这个问题很重要的部分就是这个。

li ul {
    display: none;
}

li:hover > ul {
    display: block;
}

这在悬停时效果很好。但是，我试图让我的网站在没有鼠标的情况下完全导航。不使用鼠标导航菜单的方法是使用TAB键，但是，我似乎无法显示下拉菜单。

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

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

Answer 1

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

但如果您为每个顶级li:focus > ul元素添加tabindex=0属性，则可以将规则应用于li：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

Answer 2

你可以这样做，但有几点需要注意。

1：您需要使用tabindex，因为上面的@BoltClock状态

2：您只能使用菜单和子菜单，如果您有三个级别则无法使用

3：你无法使用display: none;隐藏它，因为它不可转换。

在onfocus事件处理程序中，您添加了一个类，比如说 - .myfocus。对于额外的积分，您可以切换班级，因此如果在活动时点击它，它将变为非活动状态。

在onblur事件处理程序中，您只需删除该类。这会立即隐藏你的子菜单，所以为了让它工作，你需要在转换开始之前添加一个短暂的停顿，让浏览器有时间注册点击。

它主要在CSS和HTML中完成，但您需要编写几个事件处理程序。这些只是一行代码，因此不应影响网站加载时间。