纯CSS和HTML下拉菜单

Question

我有下面的CSS下拉菜单:

.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
top: 30px;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
button, a {
border-bottom: 1px solid #e7e7e7;
border-radius: unset;
text-align: left;
display: inline-block;
width: 100%!important;
.icon {
margin-right: 15px;
top: 0.13em;
}
&:hover {
background-color: #e7e7e7 !important;
}
&:active {
background-color: #c7c7c7 !important;
}
}
}
.dropdown:hover .dropdown-content {
display: block;
}

和下面的标记:

<div class="dropdown">
<button class="material-icon-button">
<i class="icon icon-more_vert"></i>
</button>
<div class="dropdown-content" style="width: 295px;">
<button class="material-button">
<i class="icon icon-undo"></i>
<span>Button 1</span>
</button>
<button class="material-button">
<i class="icon icon-add_alert"></i>
Button 2
</button>
</div>
</div>

这个工作很好，鼠标悬停显示菜单。

我想要实现的是，当用户实际单击按钮时，下拉菜单显示而不是鼠标悬停。

I have try:

.dropdown:active .dropdown-content {
display: block;
}

但是它似乎不工作，它显示菜单，但立即隐藏点击。

我想知道这是否可以没有JavaScript和纯css?如果有的话，有没有人能指点一下。

感谢

Answer 1

有一种用纯CSS处理点击的方法。这不是最好的方法(因为这不是CSS的目的)，但它应该可以工作。基本上，您必须根据复选框的状态使用带有标签和样式的复选框。
示例:https://css-tricks.com/the-checkbox-hack/

Answer 2

尝试如下，希望有所帮助，如果有疑问请评论

.c {
display: flex;
align-items: center;
justify-content: center;
height:100%;
width:100%;
}
.dd {
z-index:1;
position:relative;
display: inline-block;
}
.dd-a {
padding:10px;
background:white;
position:relative;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
}
.dd input:after {
content:"";
width:100%;
height:2px;
position:absolute;
display:block;
background:#C63D0F;
bottom:0;
left:0;
transform: scaleX(0);
transform-origin: bottom left;
transition-duration: 0.2s;
-webkit-transform: scaleX(0);
-webkit-transform-origin: bottom left;
-webkit-transition-duration: 0.2s;
}
.dd input {
top:0;
opacity:0;
display:block;
padding:0;
margin:0;
border:0;
position:absolute;
height:100%;
width:100%;
}
.dd input:hover {
cursor:pointer;
}
.dd input:hover ~ .dd-a {
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
}
.dd input:checked:after {
transform: scaleX(1);
-webkit-transform: scaleX(1);
}
.dd input:checked ~ .dd-c {
transform: scaleY(1);
-webkit-transform: scaleY(1);
}
.dd-a span {
color:#C63D0F;
}
.dd-c{
display:block;
position: absolute;
background:white;
height:auto;
transform: scaleY(0);
transform-origin: top left;
width: 100%;
}
.dd-c ul {
margin:0;
padding:0;
list-style-type: none;
}
.dd-c li {
margin-botom:5px;
word-break: keep-all;
white-space:nowrap;
display:block;
position:relative;
}
a {
display:block;
position:relative;
text-decoration: none;
padding:5px;
background:white;
color:#C63D0F;
}
a:before {
z-index:0;
content:"";
position:absolute;
display:block;
height:100%;
width:100%;
transform-origin:top left;
background:#C63D0F;
top:0;
left:0;
transform: scaleX(0);
-webkit-transform: scaleX(0);
}
a span {
display:block;
position:relative;

}
a:hover:before {
transform:scaleX(1);
-webkit-transform:scaleX(1);
}
a:hover span {
color:white;
}

<div class="c">

<div class="dd">
<div class="dd-a"><span>Dropdown menu</span></div>
<input type="checkbox">
<div class="dd-c">
<ul>
<li><a href="#"><span>Link</span></a></li>

<li><a href="#"><span>Link</span></a></li>
<li><a href="#"><span>Link</span></a></li>
</ul>
</div>
</div>

</div>