如何使用css点击我的菜单

Question

当我将鼠标悬停在菜单上时会显示下拉菜单.我希望它在点击时发生.我尝试过,但它对我没用.

这是我的代码:

HTML:

<div class="responsive-menu">
  <ul>
    <li>Menu
      <ul>
        <li>Zomer</li>
        <li>Herfst</li>
        <li>Winter</li>
        <li>Lente</li>
      </ul>
    </li>
  </ul>
</div>

CSS:

li {
    list-style-type:none;  
}

.responsive-menu {
    display:block;
    background-color:black;
    color:white;
    text-align:center;
    padding:10px;
    font-size:200%;
}

.responsive-menu ul li ul li {
    padding:10px;
    border-bottom:solid 1px white;
    border-top:solid 1px white;
}

.responsive-menu ul li ul {
    display:none;
    font-size:60%;
    padding-top:30px;
}
.responsive-menu ul li:hover ul {
    display:block;
}

这是JSFiddle的链接.

Answer 1

:hover您应该使用:focus伪类而不是伪类.

.responsive-menu ul li:focus ul {
    display:block;
}

为了让李获得焦点,它需要一个tabindex属性

<li tabindex="9999">Menu

http://jsfiddle.net/t78mf7jb/1/

修改

如果没有浏览器的焦点效果,请在上面添加outline:none样式li

.responsive-menu ul li:focus {
    outline: none;
}

http://jsfiddle.net/t78mf7jb/3/

Answer 2

HerrSerkers的答案是一个很好的答案,但如果你愿意稍微改变你的标记,还有另一个答案.您可以click使用checkbox它来模拟a label,例如:

li {
  list-style-type: none;
}
.responsive-menu {
  display: block;
  background-color: black;
  color: white;
  text-align: center;
  padding: 10px;
  font-size: 200%;
}
.responsive-menu ul li ul li {
  padding: 10px;
  border-bottom: solid 1px white;
  border-top: solid 1px white;
}
.responsive-menu ul li ul {
  display: none;
  font-size: 60%;
  padding-top: 30px;
}
#trigger {
  display: none;
}
#trigger:checked + .responsive-menu ul li:hover ul {
  display: block;
}

<input type="checkbox" id="trigger" />

<div class="responsive-menu">
  <ul>
    <li>
      <label for="trigger">Menu</label>
      <ul>
        <li>Zomer</li>
        <li>Herfst</li>
        <li>Winter</li>
        <li>Lente</li>
      </ul>
    </li>
  </ul>
</div>

的jsfiddle

更新 - 正如HerrSerker指出的那样,关闭菜单存在一个缺陷 - 检查他的小提示.