纯CSS水平下拉菜单，显示在点击而不是悬停

纯CSS有可能吗？当我将鼠标悬停在“Test”上时，不会显示下拉列表，而是在单击“Test”时显示下拉列表

当我打开下拉列表时，也要将黄色链接颜色保持在“Test”上

我当前的CSS

nav { 
text-transform: uppercase;
text-align: center;
margin-bottom: 20px;
}

nav ul {
list-style: none;
}

nav ul li {
display: inline-block;
text-align: left;
}

nav a {
display:block;
padding:0 20px;
transition: color .2s;
color: black;
font-size: 16px;
font-weight: 600;
line-height: 40px;
text-decoration: none;
}

nav ul ul li a { color: #FFFF64; }
nav ul ul li a:hover { color: #99A7EE; }
nav a:hover { color: #FFFF64; }
nav ul ul { display: none; position: absolute; }
nav ul li:hover > ul { display: inherit; }
nav ul ul li { background: #000; display: list-item; position: relative; }
nav ul ul li:hover { background: #333; }

---

您可以将：悬停更改为：活动，如下所示：

但是，这不会保持状态，只会在鼠标按下时起作用，一旦释放鼠标按钮，菜单将消失

据我所知，您必须使用一点javascript将active附加到该元素，直到再次单击，或者达到所需的逻辑

您可以从以下答案中看到如何实现这一点：

---

尽管这个答案使用了jQuery，但您也可以使用Javascript单击事件：如果jQuery没有其他用法，这会更有意义。

就像我在评论中所说的那样。这可以使用复选框和css伪“：checked”选择器来完成

HTML

---

您可以，只需使用表单的复选框来控制下拉菜单的打开/关闭状态。这是一种真正的黑客攻击方式，我不推荐。最近的一条帖子对此给出了一个很好的答案：

nav ul ul li a { color: #FFFF64; }
nav ul ul li a:active { color: #99A7EE; }
nav a:active { color: #FFFF64; }
nav ul ul { display: none; position: absolute; }
nav ul li:active ul { display: inherit; }
nav ul ul li { background: #000; display: list-item; position: relative; }
nav ul ul li:active { background: #333; }

<ul>
  <li>Home</li>
  <li><label for="dd">Services</label>
    <input type="checkbox" id="dd" hidden>
       <ul class="dropdown">
         <li>clean</li>
         <li>fix</li>
         <li>paint</li>
       </ul>
  </li>
  <li>contact</li>
</ul>

ul{
  background: blue;
  display:block;
  list-style-type: none;
  text-align:center;        
}
ul li{
  display: inline-block;
  color: white;
  font-family: sans-serif;
  font-weight: 800;
  font-size: 20px;
  padding: 10px 15px;;
  position:relative;
  // keep users from highlighting text if they click it on/off too fast
  -webkit-user-select: none;
 -moz-user-select: none;    
 -ms-user-select: none;  
 user-select: none;
}
ul li:hover{
  background: #f9a1c6;
  color: #000;
}
ul li .dropdown{
  display:none;
  width: 200px;
  padding:0; margin:0;
  background: green;
  position: absolute;
  top: 45px;
  left:0;
}
ul li .dropdown li{
  width:100%;
  display:block;
  padding:10px 0px; margin:0px;
}
#dd:checked ~ .dropdown{
  display:block;
}