Dropdown Menu with pure CSS and HTML - html

Question

I have below CSS for a dropdown menu:
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
top: 30px;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
button, a {
border-bottom: 1px solid #e7e7e7;
border-radius: unset;
text-align: left;
display: inline-block;
width: 100%!important;
.icon {
margin-right: 15px;
top: 0.13em;
}
&:hover {
background-color: #e7e7e7 !important;
}
&:active {
background-color: #c7c7c7 !important;
}
}
}
.dropdown:hover .dropdown-content {
display: block;
}
And below markup:
<div class="dropdown">
<button class="material-icon-button">
<i class="icon icon-more_vert"></i>
</button>
<div class="dropdown-content" style="width: 295px;">
<button class="material-button">
<i class="icon icon-undo"></i>
<span>Button 1</span>
</button>
<button class="material-button">
<i class="icon icon-add_alert"></i>
Button 2
</button>
</div>
</div>
This works fine and shows menu on mouseover.
What I am trying to achieve is that, instead of mouseover, the dropdown is shown when the user actually clicks the button.
I have tried:
.dropdown:active .dropdown-content {
display: block;
}
But It doesn't seem to work, it show the menu on click but hides immediately.
I was wondering if this could be done without JavaScript and with pure css? if so, can someone please guide on this.
Thanks

Answer 1

There is a way to handle clicks with pure CSS.
It's not the best way (because that's not what CSS is made for) but it should work. Basically you'll have to use a checkbox with a label and style according to the state of the checkbox.
Here is an example: https://css-tricks.com/the-checkbox-hack/

Answer 2

try like below, hope it helps, comment if query
.c {
display: flex;
align-items: center;
justify-content: center;
height:100%;
width:100%;
}
.dd {
z-index:1;
position:relative;
display: inline-block;
}
.dd-a {
padding:10px;
background:white;
position:relative;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
}
.dd input:after {
content:"";
width:100%;
height:2px;
position:absolute;
display:block;
background:#C63D0F;
bottom:0;
left:0;
transform: scaleX(0);
transform-origin: bottom left;
transition-duration: 0.2s;
-webkit-transform: scaleX(0);
-webkit-transform-origin: bottom left;
-webkit-transition-duration: 0.2s;
}
.dd input {
top:0;
opacity:0;
display:block;
padding:0;
margin:0;
border:0;
position:absolute;
height:100%;
width:100%;
}
.dd input:hover {
cursor:pointer;
}
.dd input:hover ~ .dd-a {
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75);
}
.dd input:checked:after {
transform: scaleX(1);
-webkit-transform: scaleX(1);
}
.dd input:checked ~ .dd-c {
transform: scaleY(1);
-webkit-transform: scaleY(1);
}
.dd-a span {
color:#C63D0F;
}
.dd-c{
display:block;
position: absolute;
background:white;
height:auto;
transform: scaleY(0);
transform-origin: top left;
width: 100%;
}
.dd-c ul {
margin:0;
padding:0;
list-style-type: none;
}
.dd-c li {
margin-botom:5px;
word-break: keep-all;
white-space:nowrap;
display:block;
position:relative;
}
a {
display:block;
position:relative;
text-decoration: none;
padding:5px;
background:white;
color:#C63D0F;
}
a:before {
z-index:0;
content:"";
position:absolute;
display:block;
height:100%;
width:100%;
transform-origin:top left;
background:#C63D0F;
top:0;
left:0;
transform: scaleX(0);
-webkit-transform: scaleX(0);
}
a span {
display:block;
position:relative;
}
a:hover:before {
transform:scaleX(1);
-webkit-transform:scaleX(1);
}
a:hover span {
color:white;
}
<div class="c">
<div class="dd">
<div class="dd-a"><span>Dropdown menu</span></div>
<input type="checkbox">
<div class="dd-c">
<ul>
<li><span>Link</span></li>
<li><span>Link</span></li>
<li><span>Link</span></li>
</ul>
</div>
</div>
</div>