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

Question

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

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

code

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

我想弄清楚如何使子菜单 "yogastyles" 在移动设备上查看时成为可折叠菜单？

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

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

我希望我把它讲得足够清楚了，如果不明白请尽管问。

亲切问候！

Answer 1

我也无法在桌面上查看 yogastyles

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

这样的媒体查询

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