张贴在这个问题:隐藏下拉菜单点击在CSS，我正在寻找一个CSS唯一的方式来隐藏一个弹出/下拉菜单时，其中一个链接被点击。Abhijeet Vadera给出了一个答案，几乎是一个很好的答案-除了下拉菜单中的链接实际上没有做任何事情/去任何地方。我将代码复制并粘贴到我一直在处理的测试页面中，并修改了链接中的目标。当鼠标悬停在按钮上时，下拉菜单确实会弹出，但是单击任何链接除了隐藏下拉菜单之外绝对没有任何作用。
有谁知道这是为什么，(特别是)如何使它工作吗?这么近…
注:在我对这个问题的回答下面的Stackoverflow文本告诉我，我应该问我自己的问题，而不是评论另一个答案或寻求澄清，所以这就是我正在做的。
如果你不想写JavaScript，最简单的方法就是使用标签。让我解释一下。
如果你按下一个按钮，它是一个"标签whose " three "标签说，例如，#hide
然后CSS部分看起来应该像这样:
希望我能帮上忙。
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
.dropbtn a {
text-decoration: none;
}
.dropdown-content {
visibility: visible;
}
#hide:target{
visibility: hidden;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<a class="dropbtn" href="#">Dropdown</a>
<div class="dropdown-content hide" id="hide">
<a href="#hide">Link 1</a>
<a href="#hide">Link 2</a>
<a href="#hide">Link 3</a>
</div>
</div>
</body>
</html>获得类似js的行为的最好方法是使用复选框。
在容器中隐藏输入复选框(这一点很重要)而不是隐藏菜单。如果复选框被选中，则显示菜单，如果复选框未被选中，则隐藏它。要触发复选框，您可以在代码的任何位置放置标签，只要它具有&;for&;属性，该属性与复选框的id相匹配。
这里的技巧是使用"~"选择器，它允许您选择一个"兄弟"。元素。在我的代码中你可以看到"#showMyMenu:checked ~ .popup"这意味着"选择与#showMyMenu"quot同级的弹出类"。
在我的例子中，我放了两个标签:一个在菜单里面，一个在菜单外面，但是你当然可以使用相同的标签来触发菜单的隐藏/显示!
#showMyMenu {
display: none;
}
label {
display: inline-block;
}
.popup {
display: none;
position: absolute;
box-shadow: 0 0 5px rgba(0,0,0);
padding: 20px;
border-radius: 3px;
}
#showMyMenu:checked ~ .popup {
display: block;
}<input type="checkbox" id="showMyMenu">
<label for="showMyMenu">Show menu</label>
<div class="popup">
<label for="showMyMenu">Hide menu</label>
<ul>
<li>
<a href="#">An item</a>
</li>
<li>
<a href="#">An item</a>
</li>
<li>
<a href="#">An item</a>
</li>
</ul>
</div>