Html 将CSS菜单从悬停切换到焦点时出现问题

我正在尝试将“超级菜单”从“悬停”切换到“聚焦”。我希望“单击”时显示下拉菜单，并一直显示，直到单击其他顶级选择。如果可能的话，我需要一个纯CSS解决方案

根据这里的其他问答，我将CSS元素从“hover”更改为“focus”，并将tabindex=“1”添加到相关的“li”标记中。它在Chrome中工作得很好，但在我尝试过的任何其他浏览器中都不行

JS fiddle在这里：

我提前表示歉意：你必须让你的JS小提琴“结果”窗口相当宽，然后菜单才会“水平”-结果将是荒谬的，直到你这样做。。。我试着让它变瘦只是为了拉小提琴，但没能让它工作

感谢您提供的任何见解

芯片

---

是的，这个“超级菜单”是一个商业产品——如果我们可以修改它以使其适用于我们的应用程序，我们肯定会支付全部要价。

在非webkit浏览器中单击时，锚定标签似乎正在窃取焦点。您可以尝试将它们更改为

span

标记。我已经使用了一个工作示例，在Chrome 27和Firefox 21中进行了测试。

单击纯CSS？为了使用CSS，最好使用一个健壮的JS解决方案（你可以让它在IE6中工作），而不是纯CSS解决方案……在JSFIDLE中，下拉菜单只需单击即可工作，而不需要悬停。有什么问题？@ExplosionPills“它在Chrome上运行得很好，但在任何其他浏览器上都不行”谢谢Aaron-这正是我需要的信息/提示/解决方案，以使我的项目再次富有成效。我非常感激！

    <li tabindex="1"><a href="#_" class="menuitem_drop">Home</a>