How do I make my menu appear on click with css

Question

When I hover over the Menu it shows the dropdown menu. I want it to happen on click. I tried it but it didnt work for me.

This is my code:

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

Here is a link to JSFiddle.

Answer 1

Instead of the :hover pseudo-class you should use the :focus pseudo-class.

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

To let the li gain focus it needs a tabindex attribute

<li tabindex="9999">Menu

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

---

amend

For not having the focus effect from browser add a outline:none style on the li

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

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

Answer 2

HerrSerkers answer is a good answer, but there is another if you're willing to change your markup a little. You can simulate a click by using checkbox with it's label, like:

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

---

Update - as HerrSerker pointed out, there is a flaw regarding closing the menu - check his fiddle with a fix.