Html 单击菜单时的悬停效果

我有一个HTML菜单，当鼠标悬停在主按钮上时会显示子菜单，但我想知道当单击按钮时是否可以显示子菜单

*Configuraões Padrões*/ul.menu，
李先生，
.菜单a{
保证金：0；
填充：0；
列表样式：无；
文字装饰：无；
}
菜单{
位置：绝对位置；
显示：无；
}
菜单{
浮动：左；
字体系列：Verdana，日内瓦，无衬线；
字体大小：15px；
填充：0 5px；
利润率：0px-8px；
宽度：100%；
位置：固定；
底部：0；
}
/*配置1*/
李先生{
浮动：左；
宽度：自动；
位置：相对位置；
}
.菜单李a{
显示：块；
填充：0 20px；
线高：45px；
高度：45px；
浮动：左；
}
/*结构2*/
.菜单li：悬停>ul.子菜单-1{
显示：块；
顶部：-145px；
左：0；
填充物：5px；
宽度：200px；
}
.菜单ul.子菜单-1 a{
宽度：160px；
填充：0 20px；
}
/*结构2*/
.菜单li：悬停>ul.子菜单-2{
显示：块；
排名：0；
左：135px；
填充物：5px；
宽度：200px；
}
.菜单ul.子菜单-2 a{
宽度：140px；
填充：0 20px；
}
/*组态软件3*/
.菜单li：悬停>ul.子菜单-3{
显示：块；
排名：0；
左：195px；
填充物：5px；
宽度：200px；
}
.菜单ul.子菜单-3 a{
宽度：160px；
填充：0 20px；
}
/*堆芯结构*/
/*第1级*/
.菜单{
背景：#CCC；
}
.菜单a{
颜色：#000；
}
.菜单li：悬停>a{
背景：#999；
颜色：#fff；
}
/*尼维尔2*/
.子菜单-1{
背景：#999；
}
.子菜单-1 a{
颜色：#fff；
}
.子菜单-1 li：悬停>a{
背景:#666；
}
/*尼维尔3*/
.子菜单-2{
背景:#666；
}
.子菜单2 a{
颜色：#fff；
利润上限：-4px；
}
.子菜单-2 li：悬停>a{
背景：#333；
}
/*尼维尔3*/
.子菜单-3{
背景：#333；
}
.子菜单-3 a{
颜色：#fff；
}
.子菜单-3 li：悬停>a{
背景：#000；
}
李曼纽：悬停，
ul li.active{}

• 将单击事件添加到列表元素
• 通过CSS类切换所需元素

var menuLi=document.querySelector（“.menu li”）；
var submenu1=document.querySelector（“.submenu-1”）；
menuLi.addEventListener（“单击”，函数（）{
子菜单1.classList.toggle（“toggle-submenu-1”）；
});
*Configuraões Padrões*/ul.menu，
李先生，
.菜单a{
保证金：0；
填充：0；
列表样式：无；
文字装饰：无；
}
菜单{
位置：绝对位置；
显示：无；
}
菜单{
浮动：左；
字体系列：Verdana，日内瓦，无衬线；
字体大小：15px；
填充：0 5px；
利润率：0px-8px；
宽度：100%；
位置：固定；
底部：0；
}
/*配置1*/
李先生{
浮动：左；
宽度：自动；
位置：相对位置；
}
.菜单李a{
显示：块；
填充：0 20px；
线高：45px；
高度：45px；
浮动：左；
}
/*结构2*/
.切换-子菜单-1{
显示：块！重要；
顶部：-145px；
左：0；
填充物：5px；
宽度：200px；
}
/*.菜单li：悬停>ul.子菜单-1{
显示：块；
顶部：-145px；
左：0；
填充物：5px；
宽度：200px；
}*/
.菜单ul.子菜单-1 a{
宽度：160px；
填充：0 20px；
}
/*结构2*/
.菜单li：悬停>ul.子菜单-2{
显示：块；
排名：0；
左：135px；
填充物：5px；
宽度：200px；
}
.菜单ul.子菜单-2 a{
宽度：140px；
填充：0 20px；
}
/*组态软件3*/
.菜单li：悬停>ul.子菜单-3{
显示：块；
排名：0；
左：195px；
填充物：5px；
宽度：200px；
}
.菜单ul.子菜单-3 a{
宽度：160px；
填充：0 20px；
}
/*堆芯结构*/
/*第1级*/
.菜单{
背景：#CCC；
}
.菜单a{
颜色：#000；
}
.菜单li：悬停>a{
背景：#999；
颜色：#fff；
}
/*尼维尔2*/
.子菜单-1{
背景：#999；
}
.子菜单-1 a{
颜色：#fff；
}
.子菜单-1 li：悬停>a{
背景:#666；
}
/*尼维尔3*/
.子菜单-2{
背景:#666；
}
.子菜单2 a{
颜色：#fff；
利润上限：-4px；
}
.子菜单-2 li：悬停>a{
背景：#333；
}
/*尼维尔3*/
.子菜单-3{
背景：#333；
}
.子菜单-3 a{
颜色：#fff；
}
.子菜单-3 li：悬停>a{
背景：#000；
}
李曼纽：悬停，
ul li.active{}




















如果您希望在单击时激活子菜单，而不是鼠标悬停，则必须使用一个小的JavaScript代码

请看片段中的注释


//收集每个菜单项
const links=document.queryselectoral（“.menu>li>a”）；
//循环
for（设i=0；i