纯 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>

这工作正常并在鼠标悬停时显示菜单。

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

我努力了：

.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;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
  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;
 
}
.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>