html - 无法在 Safari 的 CSS 中启用带有 anchor 的焦点选择器

Question

我知道某些元素不能接受 focus 选择器，例如列表元素，但我认为 anchor 很好。使用以下代码(我正在创建一个纯 css 响应式下拉菜单)，我无法在单击 anchor 时显示隐藏的 ul。

HTML:

<ul>
  <li class="primarylist">
    <a href="#" class='category1anchor'>Text</a>
    <ul class="menudrop">
      <li class="secondarylist">One</li>
      <li class="secondarylist">Two</li>
      <li class="secondarylist">Three</li>
    </ul>
  </li>
</ul>

CSS:

ul.menudrop {
  display: none;
  background-color: white;
}
li.primarylist a:focus + ul.menudrop {
  display: block;
}

jsFiddle: https://jsfiddle.net/kx0kex7x/

将 jsFiddle 选择器从 focus 更改为 hover，它完美地工作，让我没有任何理由怀疑我的语法是否正确。使用 active 仅在鼠标按下期间显示 ul。任何指针？ (我在 Safari 10 上。似乎可以在最新的 Chrome 和 FF 中正常工作)。

---

更新

我尝试使用 target 选择器并取得了部分成功。如果我更改我的 a.categor1anchor 链接以匹配为每个 ul.menudrop 新创建的唯一 ID，我可以使 ul.menudrop 出现在点击 anchor 。但是，这是一个响应式设计，我似乎无法删除其他页面大小的 target 选择器。例如，在较大的页面尺寸下，我改为使用 hover 选择器，但来自较小屏幕尺寸的最后一个目标 ul.menudrop 在较大屏幕尺寸下仍保持打开状态。我看不出有什么方法可以清除响应式设计的目标选择器。 Inherit 和 Initial 显示不影响它。

Answer 1

似乎 Safari 中的 anchor 标记需要设置 tabindex 才能获得焦点。

ul.menudrop {
  display: none;
  background-color: white;
}
li.primarylist a:focus + ul.menudrop {
  display: block;
}

<ul>
  <li class="primarylist">
    <a href="#" class='category1anchor' tabindex="0">Text</a>
    <ul class="menudrop">
      <li class="secondarylist">One</li>
      <li class="secondarylist">Two</li>
      <li class="secondarylist">Three</li>
    </ul>
  </li>
</ul>

https://jsfiddle.net/VilleKoo/dhpom1uw/