我试图在移动设备上使用：active，但是它似乎不起作用。我可以使用CSS执行此操作，还是需要在javascript中创建鼠标悬停侦听器？
req.bodymulter
如何替换移动设备的悬停
•
问答
aeiou159 回答：如何替换移动设备的悬停
如果仅需使用纯HTML和CSS，则有两个选择。
首先是将属性tabindex="0"放在li标签上，然后在CSS上添加:focus选择器。但这是问题，您必须单击其他位置才能不显示子菜单。
第二个要具有一个复选框，以容纳单击/取消单击事件。我只是为移动视图设置了一个示例，最大宽度的@media查询：800px。因此，请在检查时调整浏览器的大小。
请在下面检查我的代码：
#major{
display:flex;
justify-content:space-around;
list-style-type:none;
}
#minor1,#minor2{
display:none;
}
#about:hover,#take:hover{
background-color:#538231;
color:white;
}
#take:hover #minor2,#take:active #minor2 {
display:flex;
position:absolute;
justify-content:start;
left:0 ;
list-style-type:none;
background-color:#538231;
color:white;
width:100%;
}
#about:hover #minor1,#about:active #minor1{
display:flex;
position:absolute;
justify-content:start;
left:0;
list-style-type:none;
background-color:#538231;
color:white;
width:100%;
}
#navbar{
position:relative;
font-size:3.5vw;
color:#538231;
background-color:#b3d7f7;
}
li{
margin:0!important;
}
#minor1 li{
margin-left:3vw!important;
}
#minor2 li{
margin-left:1vw!important;
margin-right:5vw!important;
}
input[type="checkbox"] {
position: absolute;
opacity: 0;
}
@media only screen and (max-width: 800px) {
#about input[type="checkbox"]:checked ~ label,#take input[type="checkbox"]:checked ~ label {
background-color:#538231;
color:white;
}
#about input[type="checkbox"]:checked ~ ul,#take input[type="checkbox"]:checked ~ ul {
display:flex;
position:absolute;
justify-content:start;
left:0;
list-style-type:none;
background-color:#538231;
color:white;
width:100%;
}
}<div id="navbar">
<ul id="major">
<li>HOME</li>
<li id="about">
<input type="checkbox" id="check">
<label for="check">ABOUT US</label>
<ul id="minor1">
<li>OUR STORY</li>
<li>OUR WORK</li>
<li>SWAG LEADERS</li>
<li>IN THE NEWS</li>
</ul>
</li>
<li>CALENDAR</li>
<li id="take">
<input type="checkbox" id="check2">
<label for="check2">TAKE ACTION</label>
<ul id="minor2">
<li>GET INVOLVED</li>
<li>DONATE</li>
</ul>
</li>
<li>RESOURCES</li>
</ul>
</div>