Как сделать раскрывающееся меню при нажатии

Узнайте, как создать раскрывающееся меню с CSS и JavaScript. Раскрывающееся меню представляет собой переключаемое меню, позволяющее пользователю выбрать одно значение из стандартного списка 

Пример:

Home About Contact

HTML КОД:

<div class="dropdown">

<button onclick="myFunction()" class="dropbtn">Dropdown</button>

<div id="myDropdown" class="dropdown-content">

<a href="#home">Home</a>

<a href="#about">About</a>

<a href="#contact">Contact</a>

</div>

</div>

CSS КОД:

.dropbtn {

background-color: #3498DB;

color: white;

padding: 16px;

font-size: 16px;

border: none;

cursor: pointer;

border-radius:10px;

}

.dropbtn:hover, .dropbtn:focus {

background-color: #2980B9;

}

.dropdown {

position: relative;

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #fff;

border: 2px solid f1f1f1;

border-radius:10px;

min-width: 200px;

overflow: auto;

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 a:hover {background-color: #ddd;}

.show {display: block;}

JAVASCRIPT КОД:

/* Когда пользователь нажимает на кнопку, переключаться между скрытием и отображением выпадающего содержимого */

function myFunction() {

document.getElementById("myDropdown").classList.toggle("show");

}

// Закрываем раскрывающийся список, если пользователь щелкает за его пределами

window.onclick = function(event) {

if (!event.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");

var i;

for (i = 0; i < dropdowns.length; i++) {

var openDropdown = dropdowns[i];

if (openDropdown.classList.contains('show')) {

openDropdown.classList.remove('show');

}

}

}

}