无法在 Safari 浏览器中启用带有 css 锚点的焦点选择器

Question

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

---

更新

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

Answer 1

似乎 Safari 中的锚标签需要设置 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/

Answer 2

经过过去几天的研究并沿着多种途径前进，只是为了发现需要稍微复杂的黑客来解决我会在其中找到菜单的所有情况，我认为它变得更加优雅和干净，只需将jQuery与我的代码一起使用来处理出现的各种下拉列表等。我试图避免它，但我认为在撰写本文时CSS对于这种类型的菜单来说仍然不够强大。