我正在尝试创建简单的水平一级顶级菜单的简单移动版本。我想用一个最初隐藏但在用户单击屏幕右上角的简单菜单链接时显示的垂直菜单替换水平顶部导航。
事实上，您可以在 http://www.janparker.co.uk 看到我到目前为止构建的内容如果您将窗口压缩到小于 768 像素。
这几乎是一个漂亮而简单的纯 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;}
或者看 fiddle :http://jsfiddle.net/YNxVs/1/
有什么解决办法吗？实现这一目标的最简单方法是什么？ 乔纳森
最佳答案
问题是 #menu-invoker 不再有 :focus。一种解决方案可能是 position: absolute; 导航，因此它 float 在其他内容之上。这样滚动高度将永远不会改变。
(菜单外的链接在 Firefox 中有效，但在 IE 或 Webkit 中无效。不确定是哪个“错误”)
关于css - 使用 :focus has issue with non-menu links failing 的纯 CSS 移动切换菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14980165/