Convert hover dropdown menu to clickable dropdown menu - html

Question

Trying to change my navigation code from hover to click as I've realized there's no "hover" on mobile. I tried searching if there's such thing as :click in CSS, but closest I've found is :target, which doesn't do the same thing as clicking.
I'm just looking for advice for the most efficient way to change the code I have now to make it clickable.
.nav {
position: sticky;
left: 0;
background-color: rgba(255,255,255,.8);
border-radius: 0px;
border: none;
width: 100%;
padding: 10px 0;
flex-direction: row;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.item {
color: black;
font-weight: bold;
text-transform: capitalize;
width: 25%;
text-align: center;
}
.submenu {
display: none;
flex-wrap: wrap;
align-items: center;
align-text: center;
position: absolute;
padding-top: 107px;
padding: 10px;
font-size: small;
left: 0;
right: 0;
text-transform: capitalize;
z-index: 1;
background-color: #2F4F4F;
color: white;
justify-content: left;
}
.submenu li {
margin-left: 6%;
width: 19%;
padding: 5px;
}
.item.has-children:hover .submenu {
display: flex;
align-items: center;
flex-direction: row;
justify-content: left;
flex-wrap: wrap;
flex: 1 1 calc(25% - 80px);
color: black;
background-color: rgba(255,255,255,.8);
}
<ul class="nav">
<li class="item">
<a href="index.html">
<img src="../Images/Navigation/Intak Nav Mark -01.png" alt="Home"/>
</a>
</li>
<li class="item has-children">Printing
</li>
<li class="item has-children" style="color:#4D4D4D;">Graphic Design
</li>
<li class="item has-children">Chinese Calendars
<ul class="submenu">
<li>Cane Wallscroll Calendars</li>
<li>Wall Calendars</li>
<li>Mini Calendars</li>
<li>Desk Calendars</li>
<li>Special Desk Calendars</li>
<li>Lucky Money Envelopes</li>
<li>More Calendars</li>
</ul>
</li>
<li class="item">Contact Us</li>
</ul>

Answer 1

Try this with using jQuery [change ".item.has-children:hover .submenu" with "submenuActive" and add js(jQuery) code]:
$(document).ready(function() {
var countClick = 0;
$( "ul.nav li.has-children" ).click(function() {
countClick = countClick + 1;
if (countClick %2 == 0) {
$(this).children('.submenu').addClass('submenuActive');
}
else
{
$(this).children('.submenu').removeClass('submenuActive');
}
});
$( "ul.nav li.has-children" ).mouseleave(function() {
countClick = 0;
$(this).children('.submenu').removeClass('submenuActive');
});
});
.nav {
position: sticky;
left: 0;
background-color: rgba(255,255,255,.8);
border-radius: 0px;
border: none;
width: 100%;
padding: 10px 0;
flex-direction: row;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.item {
color: black;
font-weight: bold;
text-transform: capitalize;
width: 25%;
text-align: center;
}
.submenu {
display: none;
flex-wrap: wrap;
align-items: center;
align-text: center;
position: absolute;
padding-top: 107px;
padding: 10px;
font-size: small;
left: 0;
right: 0;
text-transform: capitalize;
z-index: 1;
background-color: #2F4F4F;
color: white;
justify-content: left;
}
.submenu li {
margin-left: 6%;
width: 19%;
padding: 5px;
}
.submenuActive {
display: flex;
align-items: center;
flex-direction: row;
justify-content: left;
flex-wrap: wrap;
flex: 1 1 calc(25% - 80px);
color: black;
background-color: rgba(255,255,255,.8);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav">
<li class="item">
<a href="index.html">
<img src="../Images/Navigation/Intak Nav Mark -01.png" alt="Home"/>
</a>
</li>
<li class="item has-children">Printing
</li>
<li class="item has-children" style="color:#4D4D4D;">Graphic Design
</li>
<li class="item has-children">Chinese Calendars
<ul class="submenu">
<li>Cane Wallscroll Calendars</li>
<li>Wall Calendars</li>
<li>Mini Calendars</li>
<li>Desk Calendars</li>
<li>Special Desk Calendars</li>
<li>Lucky Money Envelopes</li>
<li>More Calendars</li>
</ul>
</li>
<li class="item">Contact Us</li>
</ul>

Answer 2

If I understand correctly, CSS property "Active" is what you want to achieve?
https://www.w3schools.com/cssref/sel_active.asp

Answer 3

Maybe you are looking for pseudo-clase CSS :focus-within
https://developer.mozilla.org/es/docs/Web/CSS/:focus-within

Answer 4

You can as well use JavaScript by:
`var all = document.querySelectorAll(".item.has-children");
all.forEach(function (e) {
addEventListener('click', function (){
e.classList.remove('submenu');
e.classList.add('newMenu');
})
})`
then change the .item.has-children:hover .submenu to a different class. In my case I used newMenu. Populate the newMenu class with your desired style.