Want Css drop down sub menu to come down on click and not on Hover

Question

Hey Guys i have a sub menu which drops down when i hover over an icon and it works well

GOAL: I want the sub menu to drop down only when i click on the icon, and want the sub menu to minimize when i click the icon again. I know similar questions have been asked before and it did not help me out. Please help me. I have added the HTML and the CSS Code below. Thanks a lot for your time.

HTML

<div class="container d-flex align-items-stretch">


            
            <nav id="sidebar" class="img"  style="background-color:#1F1F22";>
            <div class="p-4">
            <h1><class="logo" >  <img src="images/abcd.png" width="200" style=" position: relative;right:0px; left:-35px; bottom:0px; width:200px; height:70px; border:none;"> </h1>
            <ul class="list-unstyled components mb-5">
           
            
              
              <div class="menu menu1">
                <span class="fa fa-lightbulb-o fa-4x  mr-3" style="color:#d5df7e;"></span> MENUS
            
                <div class="row1 rowa rowa1">Item 1</div>
                <div class="row1 rowa rowa2">Item 2</div>
                <div class="row1 rowa rowa3">Item 3</div>
                <div class="row1 rowa rowa4">Item 4</div>
                <div class="row1 rowa rowa5">Item 5</div>
                <div class="row1 rowa rowa6">Item 6</div>


                </div>
            </ul>
           

          </div>
        </nav>
</div>

CSS

.menu {
  float:left;
  margin: 9px;
  margin-top: 40px;
  margin-left:3px;
    text-align: center;
  width: 150px;
    height: 90px;
    line-height: 50px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: #3764d600;
}



.row1 {
    line-height: 40px;
    height: 50px;
    background-color: #0f276998;
    display: none;
    width: 200px;
  margin-left: 2px;
  opacity: 0;
  border-radius: 5px;
  
}


.row1:hover,
.menu:hover {
  background-color: #631b6d00;
  color:rgb(96, 29, 102); /*font colour*/
    cursor: pointer;
}

.row:last-child {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.menu:hover {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.menu:hover > .row1 {
    display: block;
}

/*
** MENU 1
*/

.rowa {
  transform-origin: left;
    transition: transform 300ms;
}

.rowa:hover {
    transform: translateX(10px);
}

.menu1:hover
.rowa1 {
    animation: rowa 300ms 0ms forwards;
}
.rowa2 {
    animation: rowa 300ms 100ms forwards;
}
.rowa3 {
    animation: rowa 300ms 200ms forwards;
}
.rowa4 {
    animation: rowa 300ms 300ms forwards;
}
.rowa5 {
    animation: rowa 300ms 400ms forwards;
}
.rowa6 {
    animation: rowa 300ms 500ms forwards;
}

@keyframes rowa {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Answer 1

you can use an input element behind scenes to acces to the checked css pseudo selector:

take a look to this pen uses the #menu-toggle:checked to show or hide the menu

Answer 2

You have to follow some simple steps to achieve that.

1.) Create an input checkbox and keep the dropdown icon on top of it.

2.) Hide the checkbox. (Not the icon)

3.) Simply use the :checked pseudo class on that input element to do the same thing you do with :hover

4.) See the this codepen for example - [Codepen](https://codepen.io/maverickcreative/pen/BaLZjqp)