Show dropdown on click instead of hover

Question

Instead of showing content when hover on the dropdown, click it to show the drop down. Is this possible to do without JQuery or plugins? I have seen some example but it is a bit complicated as there is a lot of styling.

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Simple explanation would be highly appreciated, Thanks!

Answer 1

The best non-JavaScript answer, and perhaps best solution, is to use a input[type='checkbox']:checked + label combination.

This way, the menu will toggle open or close only on user clicks.

Note that I made your button into the label. The for attribute must be set to the id of the checkbox. Also, shoot the checkbox off screen so that only the label is visible. By making it a label, set display: block and cursor:pointer to mimic the button design.

If you use the general sibling ~ and the adjacent sibling + selectors, you can show your menu when the checkbox is checked. See below.

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  position: relative;
  display:block;
  cursor:pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropcheck {
    position: absolute;
    left: -9999px;
}

.dropcheck:checked ~ .dropdown-content {
  display: block;
}

.dropcheck:checked + .dropbtn {
  background-color: #3e8e41;
}

<div class="dropdown">
  <input id="dropcheck" class="dropcheck" type="checkbox">
  <label for="dropcheck" class="dropbtn">Dropdown</label>
  
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Answer 2

I will suggest you go with a Javascript route.

When the click event happens, add a class to the DOM and style the drop down accordingly. In this example, I'm toggling the class-name show-menu whenever the button is clicked.

var dropDown = document.querySelector(".dropbtn");
var dropDownDiv = document.querySelector(".dropdown");
dropDown.addEventListener("click", function(){
  dropDownDiv.classList.toggle('show-menu');
});

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.show-menu .dropdown-content {
  display: block;
}

.show-menu .dropbtn {
  background-color: #3e8e41;
}

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>