我试图创建简单的水平单层顶级菜单的简单移动版本。我想用最初隐藏的垂直菜单替换水平顶部导航，但是当用户点击屏幕右上角的简单菜单链接时会显示该菜单。
事实上，如果你挤压窗口小于768px，你可以在http://www.janparker.co.uk看到我迄今为止所构建的内容。
它几乎是一个非常简单纯粹的CSS结果。
菜单效果很好，但如果用户首先点击＆＃34;菜单＆＃34;要激活菜单，然后不使用菜单，而是点击菜单页面外侧的其他链接，就会出现问题。
以外的链接不起作用。更糟糕的是因为菜单也关闭并且页面滚动（自然且不是不期望的行为），如果用户在页面上向下滚动很长时间，则组合完全迷失方向。
代码是：
<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/
任何解决方案？实现这一目标的最简单方法是什么？ 乔纳森
答案 0 :(得分：0)
问题是#menu-invoker不再有:focus。一个解决方案可能是position: absolute;导航，因此它浮动在其他内容之上。这样滚动高度永远不会改变。
（菜单外的链接在Firefox中运行，但不在IE或Webkit中。不确定哪个“错误”）