当我将鼠标悬停在菜单上时，它会显示下拉菜单。我希望点击发生。我试过了，但是对我没用。
这是我的代码：
HTML：
<div class="responsive-menu">
<ul>
<li>Menu
<ul>
<li>Zomer</li>
<li>Herfst</li>
<li>Winter</li>
<li>Lente</li>
</ul>
</li>
</ul>
</div>
CSS：
li {
list-style-type:none;
}
.responsive-menu {
display:block;
background-color:black;
color:white;
text-align:center;
padding:10px;
font-size:200%;
}
.responsive-menu ul li ul li {
padding:10px;
border-bottom:solid 1px white;
border-top:solid 1px white;
}
.responsive-menu ul li ul {
display:none;
font-size:60%;
padding-top:30px;
}
.responsive-menu ul li:hover ul {
display:block;
}
这是到JSFiddle的链接。
HerrSerkers的答案是一个很好的答案，但是如果您愿意稍微更改标记，则还有另一个答案。您可以模拟click使用checkbox它的label，如：
li {
list-style-type: none;
}
.responsive-menu {
display: block;
background-color: black;
color: white;
text-align: center;
padding: 10px;
font-size: 200%;
}
.responsive-menu ul li ul li {
padding: 10px;
border-bottom: solid 1px white;
border-top: solid 1px white;
}
.responsive-menu ul li ul {
display: none;
font-size: 60%;
padding-top: 30px;
}
#trigger {
display: none;
}
#trigger:checked + .responsive-menu ul li:hover ul {
display: block;
}<input type="checkbox" id="trigger" />
<div class="responsive-menu">
<ul>
<li>
<label for="trigger">Menu</label>
<ul>
<li>Zomer</li>
<li>Herfst</li>
<li>Winter</li>
<li>Lente</li>
</ul>
</li>
</ul>
</div>更新-正如HerrSerker指出的那样，关闭菜单存在缺陷-请检查他的小提琴并进行修复。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句