Javascript to keep menu open during navigation in submenu

Question

first, thank you for helping me creating the following menu of little squares that open and display sublinks on hover (original question is here). Now, I would like to achieve the following: when I klick on (not hover over) "a", I would like the square to "open" up and display the sublinks. I would also like the square to stay "open" while I klick and navigate around the submenus (a1, a2...)...also when I click on the content/on other parts of my site, if possible. I want the square to only shrink back to its starting size only when I click on a different square ("b"). I know I need javascript for this, and have looked at some scripts I found on the internet, but I unfortunately understand too little about javascript to be able to adapt them to my own menu (what I found is usually for "normal" dropdown or accordeon menus but I have no idea at all what I need to do with it to make it work with my menu as what I have is not exactly the same). Thanks in advance !

#hideme{display:none;}

.menu  ul {
    padding:0;
    margin:0;
 color:white;
 text-decoration:none;
}

.menu  li {
    box-sizing:border-box;
    padding:0;
    margin:0;
    list-style:none;
 color:white;
 text-decoration: none;
 text-align: bottom; vertical-align: bottom;
}


.menu > li ul li{
    box-sizing:border-box;
    margin-left:20px;
 margin-top:5px;
    list-style:none;
 text-decoration: none;
    text-align: bottom; vertical-align: bottom;
}

ul.menu > li {
    overflow:hidden;
    width:90px;
 min-height:90px;
    max-height:90px;
    padding:10px;
    margin-bottom:10px;
    background:#5DB26E;
    color:#5DB26E;
    cursor:pointer;
    transition:all 0s ease;
 
}


ul.menu > li:hover {
    width:180px;
 min-height:180px;
 color: white;
    border: 3px solid white;
 box-shadow: 0px 0px 0px 3px #5DB26E;
  position: relative;
}

ul.menu> li:hover #hideme{display:block;  position: absolute;
    bottom: 10;}
ul.menu> li:hover .fa-arrow-right{content: "\f023";}

.hoverme:hover .fa-arrow-right,
.hoverme .fa-check {
    display: none;
}
.hoverme:hover .fa-check {
    display: inline;
}

 
.menu a {
    margin:0;
 text-decoration:none;
 color:white;
}

<ul class="menu"> 
<li> <a href="a.html"><b>a</b></a>
      <ul> <span id ="hideme">
        <li><a href="a1.html" class="hoverme"><i class="fa fa-arrow-right"></i><i class="fa fa-check"></i>&nbsp;a111111111111111</a></li>
        <li><a href="a2.html" class="hoverme"><i class="fa fa-arrow-right"></i><i class="fa fa-check"></i>&nbsp;a2222222222222</a></li></span>
      </ul>
    </li>
<li> <a href="b.html"><b>b</b></a>
      <ul> <span id ="hideme">
        <li><a href="b1.html" class="hoverme"><i class="fa fa-arrow-right"></i><i class="fa fa-check"></i>&nbsp;b1</a></li>
        <li><a href="b2.html" class="hoverme"><i class="fa fa-arrow-right"></i><i class="fa fa-check"></i>&nbsp;b2</a></li></span>
      </ul>
    </li>
</ul>