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

Question

我一直在研究响应式菜单，它在大多数情况下都运行良好。我在我的手机和我的桌面上用 chrome 和 mozilla 试过了。但它在 Chrome 中有问题。

当你调整 chrome 的大小时，只有第一个菜单项可以被点击，并为较小的视口(viewport)获得较小的菜单。

此错误不存在于桌面版 mozilla 和安卓版 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>

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

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

Answer 1

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

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

fiddle :http://jsfiddle.net/marionebl/LNh3e/4/