纯CSS移动切换菜单使用：焦点有问题，非菜单链接失败

我正在尝试创建我的简单水平一级顶部菜单的简单移动版本。我想用一个垂直菜单替换水平顶部导航，该菜单最初是隐藏的，但在用户单击屏幕右上角的简单菜单链接时显示

事实上，若你们把窗口压缩到768px以下，你们就可以看到我目前所做的

这几乎是一个漂亮的纯CSS结果

菜单工作正常，但如果用户首先单击“菜单”激活菜单，然后不使用菜单，而是单击菜单外页面上的其他链接，则会出现问题

外部的链接不起作用。更糟糕的是，由于菜单也会关闭，页面也会滚动（既有自然的行为，也有非不良的行为），如果用户在页面上向下滚动很长一段时间，这种组合会让用户完全迷失方向

代码是：

#菜单调用程序：focus~nav{display:block；}
导航{显示：无；}
ul:focus，ul:active，ul:hover{display:block；}

或者看看小提琴：

有什么解决办法吗？最简单的方法是什么？ Jonathan

问题在于

#菜单调用者

不再具有

：焦点

。一个解决方案可能是

位置：绝对导航，因此它浮动在其他内容的顶部。这样，滚动高度永远不会改变

（菜单外的链接在Firefox中起作用，但在IE或Webkit中不起作用。不确定哪一个做得“不对”）