Javascript 下拉菜单赢得'；行不通

我正在创建一个菜单，当用户单击类别时，它有两个项目“what's new”和“categories”，应该有很多子类别可以下拉。但是我不知道如何让它们掉下来。有人有什么解决办法吗？这是小提琴-

类别

添加此css：

ul.shop-nav li:hover ul {
    display: block;
}

这将执行以下操作：

---

当您将鼠标悬停在ul.shop-nav li元素上时，您将ul嵌套的内部设置为显示。

这里您有办法，我已经删除了所有不需要的内容，您可以再次添加它。只需点击分类即可享受

.shop侧边栏{
宽度：30%；
宽度：calc（295px）；
显示：内联块；
右边填充：65px；
垂直对齐：顶部；
字体系列：“maison”，无衬线；
字号：600；
字体大小：11px；
颜色：#000；
字母间距：1.5px；
线高：18px；
文本转换：大写；
}
工厂导航{
列表样式：无；
填充：0；
保证金：0；
}
ul.shop-nav li.活动，ul.shop-nav li:悬停{
颜色：#000；
不透明度：1；
字体大小：粗体；
}
ul.shop-nav-li{
过渡：均为0.3秒；
光标：指针；
填充：18px 20px；
背景色：#F8；
边缘底部：2px；
}
ul.shop-nav li.active a{
颜色：#000；
}
ul.shop-nav a{
颜色：#000；
}
ul.shop-nav li.活动，ul.shop-nav li:悬停{
颜色：#000；
不透明度：1；
字体大小：粗体；
}
ul.shop-nav li svg{
宽度：10px；
高度：10px；
垂直对齐：文本底部；
填写：#000；
过渡：均为0.3秒；
浮动：对；
}
商铺导航{
显示：无；
列表样式：无；
左侧填充：0；
利润率：12px0；
}
ul.shop-nav-li ul-li{
颜色：#000；
边界：0！重要；
字体系列：“maison”，无衬线；
字体大小：12px；
字母间距：0；
填充：0；
字体大小：正常；
文本转换：无；
边缘底部：12px；
}
商店导航{
左边距：16像素；
}
输入[type='checkbox']{
显示：无；
}
#子目录，#子目录1{
显示：无；
}
#类别：选中~#子列表{
显示：块；
}
#类别1：选中#子分类类别1{
显示：块；
}

类别


全部的

第一类

谢谢！但是，菜单显示为悬停，而不是单击。我希望它在子菜单中仅在单击类别时显示。我不好，对于单击事件，应该使用Javascript或jQuery。这里有一个关于如何做到这一点的链接：如果你需要帮助，请告诉我，我很乐意提供帮助。在你的类“w-sub”所在的位置添加一个id，然后添加这个jQeury代码：

$（“#idHere”）。单击（function（）{$（'#idHere ul'）.css（'display'，block'）；}）请使用链接解释此代码的工作原理，不要只给出代码，因为解释更有可能帮助未来的读者。另见。不幸的是，这段代码不起作用。“类别”不可单击。您是否单击了类别？也许你想要点击整个列表元素，不是吗？告诉我，我会重写它。我最初检查它时一定出错了。它现在可以在我单击“类别”时下拉子菜单。但是现在，当您单击它们时，其中的类别不会下拉它们的子类别。当然，您必须对所有这些类别应用相同的技术，基本上为所有应切换的子列表元素使用复选框和标签。！！！我添加了一个带有一个子菜单的示例，单击categories，然后单击categories 1。让我知道这是否是你要找的。T