带有响应式导航菜单的 Chrome 错误

Question

我一直在开发一个响应式菜单，它在大多数情况下都可以正常工作。我在手机和桌面上用 chrome 和 mozilla 尝试过。但它在 Chrome 中会出现问题。

当您调整 chrome 的大小并为较小的视口获取较小的菜单时，只能单击第一个菜单项。

此错误在桌面版 mozilla 和 android 版 mozilla 中均不存在。但是它存在于桌面版和移动版 Chrome 中。

如果你在 mozilla 中运行这个 jsfiddle，你会发现它运行良好 http://jsfiddle.net/LNh3e/ 我不能对 chrome 说同样的话，因为它没有按预期工作。

通常这种类型的错误是由于未关闭的标签而显示的，但我找不到：

                       <nav>
                            <ul>
                                <li><a href="index.php">Home</a></li>
                                <li><a href="about.php">About</a></li>
                                <li><a href="portfolio.php">Portfolio</a></li>
                                <li><a href="contact.php">Contact</a></li>
                                <li><a href="services.php">Services</a></li>
                            </ul>

                        </nav>

为了获得更小的视口，请将窗口大小调整为 770 像素或更低

我不知道为什么会出现这个错误。非常感谢您的帮助。

Answer 1

这似乎是一个堆叠问题。为#main_menu 定义一个z-index 可以修复它。

#main_menu {
    ....
    position: relative;
    z-index: 1;
}

小提琴：http://jsfiddle.net/marionebl/LNh3e/4/