如何仅在折叠菜单上设置可折叠子菜单（又称在移动设备上）

Question

各位大家好，感谢您阅读本文！

我正在尝试但未能得到我想要的东西，我有这个导航栏：

code

https://jsfiddle.net/x4mcq4h7/17/

我试图找出如何在移动设备上查看子菜单“yogastyles”成为可折叠的菜单？

在手机上查看（折叠导航栏）时，您无法访问子菜单“yogastyles”，因为父菜单的点击会将您带到页面。

我知道媒体查询，但我不知道如何完全实现这一点，我有一个js脚本添加＆amp;删除一个类，但我不能使它与我已经拥有的可恢复子菜单一起工作......

我希望我把它弄得一塌糊涂，如果没有，就要求离开。

亲切的问候！

Answer 1

我无法在桌面上查看yogastyles

编辑：我看了一遍。 .dropdown-content有一个半透明的背景，很难看到。尝试提供类似

的媒体查询

@media (max-width: 767px) {
    .dropdown-content {
        background: #fff;
    }
}