【发布时间】：2013-02-05 11:20:49
【问题描述】：
我正在尝试为我的简单水平一级顶级菜单创建简单的移动版本。我想用一个垂直菜单替换水平顶部导航，该菜单最初是隐藏的，但当用户单击屏幕右上角的简单菜单链接时会显示出来。
事实上，如果您将窗口压缩到小于 768 像素，您可以在 http://www.janparker.co.uk 看到我迄今为止构建的内容。
这几乎是一个简单漂亮的纯 CSS 结果。
菜单完美运行，但是如果用户首先单击“菜单”来激活菜单，然后不使用菜单，而是单击菜单外页面上的其他链接，就会出现问题。
外部链接无效。更糟糕的是，菜单也会关闭并且页面滚动（自然行为和非不良行为），如果用户在页面向下滚动很长一段时间，这种组合会让用户完全迷失方向。
代码是：
<a id="menu-invoker" tabindex="0">Menu</a>
<nav><ul><li>First menu item</li><li>second menu item</li></ul></nav>
<p><a href="http://www.google.com">Some other link</a></p>
#menu-invoker:focus ~ nav {display: block;}
nav {display:none;}
ul:focus, ul:active, ul:hover {display: block;}
或看小提琴：http://jsfiddle.net/YNxVs/1/
有什么解决办法吗？实现这一目标的最简单方法是什么？ 乔纳森
【问题讨论】：
标签： css mobile menu hyperlink focus