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

Question

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

我正在尝试但没有得到我想要的，我有这个导航栏：

code

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

我正试图弄清楚如何使子菜单“yogastyles”在移动设备上查看时成为可折叠菜单？

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

我知道媒体查询，但我不知道如何完全实现这一点，我有一个添加和删除一个类的 js 脚本，但我无法让它与我已经拥有的可悬停子菜单一起工作......

我希望我做得足够清楚，如果没有，请询​​问。

亲切的问候！

Answer 1

我也无法在桌面上查看瑜伽风格

编辑：我看过了。 .dropdown-content 有一个半透明的背景，很难看到。尝试进行媒体查询，例如

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