纯 CSS 可点击下拉菜单？

Question

本教程 解释了如何使用 :hover 伪类在悬停时设置 HTML 元素的样式，以及如何在悬停在纯 CSS 中的特定元素上时创建下拉列表（不使用任何 JavaScript）。

是否可以在纯 CSS 中创建与下面示例中的下拉菜单相同的下拉菜单，但是是在单击元素而不是将鼠标悬停在元素上时？

我宁愿根本不使用 JavaScript，或者——如果没有 JavaScript 是不可能的——尽可能少使用 JavaScript。下拉菜单的项目本身应该是可点击的。

例子：

 .dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    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: #f1f1f1}

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

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

 <div class="dropdown" style="float:left;">
  <button class="dropbtn">Left</button>
  <div class="dropdown-content" style="left:0;">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

原文由 Ole 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在这里，您使用了一个隐藏的复选框，并在“选中”时显示菜单。

 /*hide the inputs/checkmarks and submenu*/
input, ul.submenu {
  display: none;
}

/*position the label*/
label {
  position: relative;
  display: block;
  cursor: pointer;
}

/*show the submenu when input is checked*/
input:checked~ul.submenu {
  display: block;
}

 <input id="check01" type="checkbox" name="menu" />
<label for="check01">Menu</label>
<ul class="submenu">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
</ul>

取自 此 Codepen 并进行了简化。

原文由 CalvT 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用单选按钮和兄弟选择器。

这与复选框的不同之处在于，当单击不同的菜单项时，它会自动关闭打开的菜单项。

 .menu ul,
.menu input,
.menu .closer,
.menu input:checked~.opener {
  display: none;
}

.menu input:checked~ul,
.menu input:checked~.closer {
  display: block;
}

 <ul class="menu">
  <li>
    <input type="radio" name="menuopt" id="drop1" />
    <label class="opener" for="drop1">Parent item 1</label>
    <label class="closer" for="dropclose">Parent item 1</label>
    <ul>
      <li><a href="">Menu item 1</a></li>
      <li><a href="">Menu item 2</a></li>
      <li><a href="">Menu item 3</a></li>
    </ul>
  </li>
  <li>
    <input type="radio" name="menuopt" id="drop2" />
    <label class="opener" for="drop2">Parent item 2</label>
    <label class="closer" for="dropclose">Parent item 2</label>
    <ul>
      <li><a href="">Menu item 1</a></li>
      <li><a href="">Menu item 2</a></li>
      <li><a href="">Menu item 3</a></li>
      <li><a href="">Menu item 4</a></li>
      <li><a href="">Menu item 5</a></li>
    </ul>
    <input type="radio" name="menuopt" id="dropclose" />
  </li>
</ul>

在 jsFiddle 上查看

原文由 Randy Hall 发布，翻译遵循 CC BY-SA 4.0 许可协议