css - 如何仅在折叠菜单(又名移动设备)上设置可折叠子菜单

Question

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

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

code

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

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

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

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

我希望我把它写得足够​​清晰，如果没有，请离开。

亲切的问候!

Answer 1

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

编辑:我看了一遍。 .dropdown-content 有一个半透明的背景，很难看清。尝试提供像这样的媒体查询

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