Html 如何编辑此导航以使其成为单击导航而不是悬停导航？

这是我要编辑的以下代码段。

这是演示

我想单击下拉菜单，直到我再次单击另一个菜单或同一个菜单，它才会保持下拉状态

你知道我该怎么做吗？

找到了解决办法

给你：

---

我还添加了一个jQuery，相当于链接（锚）上的JavaScript返回false，因为默认情况下，带有

a

#链接的锚如果找不到跳转点，将重新加载页面。如果代码允许，您可以在菜单的第一级使用锚以外的其他元素，而不需要JavaScript。

使用

目标
伪类代替悬停。注意，我已经为每个子菜单添加了一个ID，并使用顶级导航项链接到该部分


菜单{
保证金：0自动；
填充：0；
宽度：350px；
}
.menu li{列表样式：无；}
.菜单李a{
显示：表格；
页边顶部：1px；
填充：14px 10px；
宽度：100%；
背景#337D88；
文字装饰：无；
文本对齐：左对齐；
垂直对齐：中间对齐；
颜色：#fff；
溢出：隐藏；
-webkit转换属性：背景；
-webkit转换持续时间：0.4s；
-webkit过渡计时功能：缓解；
过渡性质：背景；
过渡时间：0.4s；
过渡定时功能：缓解；
}
.menu>li:第一个子a{margin top:0；}
.菜单a:悬停{
背景#4AADBB；
-webkit转换属性：背景；
-webkit转换持续时间：0.2s；
-webkit过渡计时功能：缓解；
过渡性质：背景；
过渡时间：0.2s；
过渡定时功能：缓解；
}
.菜单{
保证金：0；
填充：0；
}
.菜单李莉a{
显示：块；
边际上限：0；
填充：0 10px；
身高：0；
背景#C6DDD9；
颜色：#1F3D39；
-webkit转换属性：全部；
-webkit转换持续时间：0.5s；
-webkit过渡计时功能：缓解；
过渡性质：全部；
过渡时间：0.5s；
过渡定时功能：缓解；
}
/*此选择器已更改*/
.menu>li>ul:目标LIA{
显示：表格；
页边顶部：1px；
填充：10px；
宽度：100%；
高度：1米；
-webkit转换属性：全部；
-webkit转换持续时间：0.3s；
-webkit过渡计时功能：缓解；
过渡性质：全部；
过渡时间：0.3s；
过渡定时功能：缓解；
}
/*此选择器已更改*/
.menu>li>ul:目标li a:悬停{
背景：A4CAC8；
-webkit转换属性：背景；
-webkit转换持续时间：0.2s；
-webkit过渡计时功能：缓解；
过渡性质：背景；
过渡时间：0.2s；
过渡定时功能：缓解；
}

























我没有密码。我对这一点很陌生，甚至不知道如何开始。我不要求别人做我的工作，但任何指针都可以。CSS不能识别点击事件。最接近的是
#选择器：active
。但这只会在按住鼠标按钮的情况下应用css。菜单一发布就会显示出来。因此，您必须使用Javascript。既然您是初学者，我想使用jQuery这样的库是最简单的。我并不介意为您编写一个有效的解决方案。但你不会从中学到任何东西。制作这样的东西的代码并不难，但对于一个绝对的初学者来说可能相当复杂。基本上，你想要的是用jQuery捕捉一个点击事件，应用当前处于悬停状态的css，如果第二次点击，再将其删除。正如@icecub提到的，你需要发布你试图使用的代码，并让我们知道你尝试了什么。请参阅“帮助”部分中的。我知道你是新来的，正在尝试开始，但如果你花更多的精力帮助我们理解你的尝试（即使完全错误），你将更有可能得到答案。另外，提醒一下，最好发布代码（即使它来自另一个网站），而不是链接到它。如果那个网站死掉了，你的链接就没用了。就像人们说的，你应该用JavaScript来实现这一点。这应该有效，但不幸的是无效。菜单li:focus+ul li a{styles here}
如果页面上有其他内容可以聚焦，则会中断，例如表单字段：@JonP这是为该标记提供的解决方案。目标想法很简洁，但您需要添加跳转点并指向它们的链接。还有一个问题是，在垂直类型菜单中，它会滚动到跳转点。不过，我很少记得
：target
伪类。添加有意义的链接从来都不是坏事，比盲目的“#”要好得多。如果有一个小菜单，可能不会有明显的跳跃，正如您所指出的，如果需要的话，可以通过javascript消除这种跳跃。我喜欢使用焦点的概念，我只是想指出它的缺陷。当然不值得投反对票。@JonP我没有投反对票，也没有在这一页投赞成票。谢谢JonP，这很有帮助。我知道它们是如何链接在一起的，但是如果我想让菜单1也链接到另一个页面呢？有没有可能将其锚定到两个链接上？不太可能，一个链接在行动上。唯一的方法是添加一个像“+”这样的链接来扩展菜单和文本以导航到页面。这就是为什么悬停嵌套菜单在本例中效果更好。您可以使用一个javascript菜单，在悬停时展开，然后
.menu li a:focus + ul li a{ styles here}