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

Question

纯CSS可以吗？当我将鼠标悬停在“测试”上时，而不是显示下拉列表，当我点击“测试”时显示它。

当我打开下拉列表时，还要将黄色链接颜色保持为“测试”。

我目前的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; }

http://jsfiddle.net/hn93jyvc/

Answer 1

像我在评论中所说的那样。这可以使用与css pseudo＆＃39;：checked＆＃39;结合使用的复选框完成。选择器。

HTML

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

CSS

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;
}

Answer 2

你可以改变：hover to：这样活跃：http://jsfiddle.net/hn93jyvc/1/

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; }

但是，这不会保持状态，只能在鼠标按下上工作，一旦松开鼠标按钮，菜单就会消失。

据我所知，你必须使用一些javascript来激活这个元素，直到另一次点击或所需的逻辑。

您可以从这个答案中看到如何实现这一目标：https://stackoverflow.com/a/20343068/5242026

虽然这个答案使用了jQuery，但您也可以使用Javascript click事件：https://developer.mozilla.org/en/docs/Web/Events/click如果没有其他jQuery用法，那就更有意义了。