响应式菜单不适用于小屏幕

Question

我正在尝试创建自适应导航菜单。我在网上发现了一些教程，在找到一个我喜欢的风格之后，我按照指示在我的网站上创建它，但我似乎无法使用一些功能。

1：我无法使用悬停效果为图标/链接添加底部边框，以帮助突出显示焦点的边框。

2：当屏幕尺寸低于32.5em（519px）时，菜单应该成为折叠的单列菜单。菜单确实成为一个列，但它不会像预期的那样折叠成一个按钮。它不断显示占据大量垂直空间的所有链接。

Here is a jsFiddle of my project so you can see what I have so far:
https://jsfiddle.net/4Ljs1bfn/1/

Answer 1

您需要使用示例使用的js检测。

1. 将class="no-js"添加到您的body元素。
2. 然后在加载时，设置document.body.className = "js"（或等效的）。

这将启用菜单。

对于:hover问题，您需要身体元素上的class="no-touch"（如果检测到触摸屏，则使用js将其删除）。

另一件事：你在第{8行'<a href="..."">处有一个html错误（在结尾处是额外的“）。

更新了小提琴：https://jsfiddle.net/4Ljs1bfn/2/。你仍然有一些css问题，但我认为你可以自己修复它们。