Question

我一直在研究一个响应式菜单，它在大多数情况下都能正常工作。我在我的手机和桌面上试用了Chrome和mozilla。但它在Chrome中出现问题。

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

这个bug在桌面的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>

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

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

Answer 1

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

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

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

Chrome错误具有自适应导航菜单

1 个答案: