Html 下拉菜单选项卡键纯CSS

我试图构造一个简单的下拉菜单，即使禁用了javascript，也可以通过tab键访问它

ul {
  list-style-type: none;
}
#nav > li {
  display: inline-block;
  cursor: pointer;
}
#nav a {
  text-decoration: none;
  color: white;
  padding: 20px;
  display: inline-block;
}
li {
  width: 100px;
  color: white;
  background-color: #08C;
}
ul ul {
  display: none;
  position: absolute;
  padding: 0;
  margin: 0;
}
ul#nav > li:hover > ul {
  display: block;
}

我可以在菜单1上单击tab，然后可以看到Eintrag 1和Eintrag 2。再次按tab键聚焦Eintrag 1，然后ul再次不可见，因为它显示：无，因此我无法访问Eintrag 2。有没有一个简单的CSS解决方案来标记所有条目？

如果在标记中写入tabindex=XXXX，当XXXX是一个增量数字时，tabindex将定义元素通过tab键聚焦的顺序

因此：

---

考虑到我正确理解了您的要求，以下是我的答案：

选项卡在某种程度上类似于单选按钮。一个实例中只能选择一个。为什么不将每个选项卡关联到一个单选按钮，并根据选定的单选按钮检查当前选项卡

保险商实验室{ 列表样式类型：无； } 导航>李{ 显示：内联块； 光标：指针； } 导航标签{ 文字装饰：无； 颜色：白色； 填充：20px； 显示：内联块； } li{ 宽度：100px； 颜色：白色； 背景色：08C； } ul{ 显示：无； 位置：绝对位置； 填充：0； 保证金：0； } ulnav input.tabset{ 宽度：0px； 高度：0px； 填充：0px； } ulnav输入。选项卡集：选中~ul{ 显示：块； } 菜单1 菜单2

---

这不起作用，因为无法聚焦li元素。此外，我认为没有必要通过tabindex对它们进行标记，因为默认情况下，我希望通过DOM顺序对它们进行标记。如果我从ul中删除display:none，那么制表符工作得很好谢谢，但我认为这会带来许多其他问题，比如1单击菜单1确实打开了它，但它没有关闭2没有悬停效果3我需要隐藏输入元素4我不能直接通过我的菜单制表符，它只能通过空间和制表符的混合来实现。但还是很有趣，谢谢分享。

<ul id='nav'>
  <li><a href='#'>Menu 1</a>
    <ul>
      <li><a href='#'>Eintrag 1</a></li>
      <li><a href='#'>Eintrag 2</a></li>
    </ul>
  </li>
  <li><a href='#'>Menu 2</a>
    <ul>
      <li><a href='#'>Eintrag 1</a></li>
      <li><a href='#'>Eintrag 2</a></li>
      <li><a href='#'>Eintrag 3</a></li>
      <li><a href='#'>Eintrag 4</a></li>
    </ul>
  </li>
</ul>

a:focus + ul{
   display: block;
 }

<ul id='nav'>
  <li><a href='#' tabindex="1">Menu 1</a>
    <ul>
      <li><a href='#' tabindex="2">Eintrag 1</a></li>
      <li><a href='#' tabindex="3">Eintrag 2</a></li>
    </ul>
  </li>
  <li><a href='#' tabindex="4">Menu 2</a>
    <ul>
      <li><a href='#' tabindex="5">Eintrag 1</a></li>
      <li><a href='#' tabindex="6">Eintrag 2</a></li>
      <li><a href='#' tabindex="7">Eintrag 3</a></li>
      <li><a href='#' tabindex="8">Eintrag 4</a></li>
    </ul>
  </li>
</ul>

 ul#nav > li:hover > ul
 ul#nav > li:focus > ul {
    display: block;
 }