Quando passo o mouse sobre o Menu, ele mostra o menu suspenso. Eu quero que isso aconteça no clique. Eu tentei, mas não funcionou para mim.

Este é o meu código:

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

Aqui está um link paraJSFiddle.