Creating a clickable dropdown menu with HTML & CSS [duplicate] - html

Question

This question already has answers here:
Javascript onclick simulation using only css and html (without javascript)
(3 answers)
Closed last year.
I am currently working on a project using only HTML & CSS. I am wanting to make the menu button only display the dropdown items when it is clicked, and have an "x" button that will close them when it is clicked. I am able to make the menu dropdown on hover but am having no luck with it on click without JavaScript.
Does anyone know how I might be able to do this with just HTML & CSS? Here is the HTML & CSS that I have as of right now:
.header-menu {
background-color: #fff;
font-family: "Noto Sans", sans-serif;
font-size: 18px;
}
.header-menu-items {
display: none;
z-index: 1;
max-width: 100%;
overflow-wrap: break-word;
font-weight: 900;
}
.a {
color: #000;
padding: 10px;
text-decoration: none;
}
.search {
display: none;
}
.search-icon {
display: none;
}
.header-menu-items hr {
color: #d0d0d0;
background-color: #d0d0d0;
height: 1px;
border: none;
}
.header-menu-btn {
text-align: left;
background-color: #ff3b3b;
color: #fff;
font-size: 20px;
font-weight: 600;
padding: 10px 0;
border: none;
cursor: pointer;
width: 100%;
margin-bottom: 10px;
padding-left: 10px;
}
.header-menu:hover .header-menu-items {
display: block;
}
<div className="header-menu">
<button className="header-menu-btn">Menu</button>
<div className="header-menu-items">
<div>
<a className="a" href="">
Shirts
</a>
<hr />
<a className="a" href="">
Pants
</a>
<hr />
<a className="a" href="">
Shoes
</a>
<hr />
<a className="a" href="">
T-shirts
</a>
<hr />
<a className="a" href="">
Accessories
</a>
<hr />
</div>
</div>
</div>

Answer 1

Javascript onclick simulation using only css and html (without javascript)
I know your answer is in the answer to this post but I can't really figure out how to do it myself.
It would require changing your button to an input tag of checkbox type and going from there.

Answer 2

First of all it has to be class and not className.
What you want to do can be achieved with a checkbox and the sibling selector ~.
.header-menu {
background-color: #fff;
font-family: "Noto Sans", sans-serif;
font-size: 18px;
}
.header-menu-items {
display: none;
z-index: 1;
max-width: 100%;
overflow-wrap: break-word;
font-weight: 900;
}
.a {
color: #000;
padding: 10px;
text-decoration: none;
}
.search {
display: none;
}
.search-icon {
display: none;
}
.header-menu-items hr {
color: #d0d0d0;
background-color: #d0d0d0;
height: 1px;
border: none;
}
.header-menu-btn {
text-align: left;
background-color: #ff3b3b;
color: #fff;
font-size: 20px;
font-weight: 600;
padding: 10px 0;
border: none;
cursor: pointer;
width: 100%;
margin-bottom: 10px;
padding-left: 10px;
display: block;
}
#toggle-menu {
display: none;
}
#toggle-menu:checked ~ .header-menu-items {
display: block;
}
#toggle-menu ~ label .hide {
display: none;
}
#toggle-menu:checked ~ label .show {
display: none;
}
#toggle-menu:checked ~ label .hide {
display: inline;
}
<div class="header-menu">
<input type="checkbox" id="toggle-menu"><label for="toggle-menu" class="header-menu-btn">Menu <span class="show">show</span><span class="hide">hide<span></label>
<div class="header-menu-items">
<div>
<a class="a" href="">
Shirts
</a>
<hr />
<a class="a" href="">
Pants
</a>
<hr />
<a class="a" href="">
Shoes
</a>
<hr />
<a class="a" href="">
T-shirts
</a>
<hr />
<a class="a" href="">
Accessories
</a>
<hr />
</div>
</div>
</div>