带有下拉菜单的响应式导航栏

Question

我正在制作一个使用 html、css 和 javascript 的导航栏。我最近在使导航栏响应时遇到了一个问题，我需要帮助。这是 codepen 的链接：https://codepen.io/Linus_Ekman/pen/WMeJvv 我粘贴了所有代码，以便您可以更好地了解我的意思并尝试帮助我。所以一切都很好，除了当我点击“汉堡包”图标时，导航栏下应该会出现一个下拉菜单，该下拉菜单会延伸到页面的整个宽度，一列中有 4 个导航选项。这是单击“汉堡包”图标时我希望它执行的示例：https://codepen.io/Linus_Ekman/full/wywjoB/

Tell me if you need any more information

编辑： 正如您在第一个 codepen 链接中看到的那样，下拉列表现在可以正常工作。但是还有另一个问题。如果在下拉菜单打开时将鼠标悬停在“汉堡包”图标下，您可以看到链接在那里，这意味着导航栏在那里但没有显示。我怎样才能让他们离开？

Answer 1

我正在查看您的示例，如果您在 show 类 (ul.show) 中添加一些规则，您可以使其工作：

您需要设置background-color: #fff 和left: 0，然后就可以开始了。

我叉了你的笔，你可以在这里查看代码https://codepen.io/fermijs/pen/aqoGyG