How To Show Sub-menu On Click Of li In Vertical Sidebar Menu Using Css?

Question

Here I have sidebar menu, here I am trying to show country name on click on Country. But the problem is that whenever I hover over Country the country name are shown instead of showing country name on click of Country.

Below is my HTML and CSS:

<nav id="nav">
    <ul class="mainmenu">
        <li><a href="#top" id="top-link" class="skel-layers-ignoreHref"><span class="icon fa-home">Intro</span></a>
        </li>
        <li>
            <a><span class="icon fa-envelope">Country</span></a>
            <ul class="submenu">
                <li><a href="">USA</a></li>
                <li><a href="">Australia</a></li>
                <li><a href="">UK</a></li>
            </ul>
        </li>
    </ul>
</nav>

<style>
    .mainmenu, .submenu {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .mainmenu a {
            display: block;
            text-decoration: none;
            padding: 10px;
            color: #000;
        }

        .mainmenu li:hover .submenu {
            display: block;
            max-height: 200px;
        }

    .submenu {
        overflow: hidden;
        max-height: 0;
        -webkit-transition: all 0.5s ease-out;
    }
</style>

Answer 1

use jquery for onclick event and remove hover css

var flag = 1;

    $('.icon').click(function() {
      if(flag == 1){
      $('.submenu').css('display', 'block');
      flag = 0;}
      else{
      $('.submenu').css('display', 'none');
      flag = 1;
      }
      
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <nav id="nav">
    <h5>click on the country</h5>
                    <ul class="mainmenu">
                        <li><a href="#top" id="top-link" class="skel-layers-ignoreHref"><span class="icon fa-home">Intro</span></a></li>              
                        <li>
                            <a><span cursor="help" class="icon fa-envelope">Country</span></a>
                            <ul class="submenu">
                                <li><a href="">USA</a></li>
                                <li><a href="">Australia</a></li>
                                <li><a href="">UK</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>
    <br><br>


         <style>
            .mainmenu, .submenu {
                list-style: none;
                padding: 0;
                margin: 0;
            }

                .mainmenu a {
                    display: block;
                    text-decoration: none;
                    padding: 10px;
                    color: #000;
                }

                .mainmenu li .submenu {
                    display: none;
                    max-height: 200px;
                }

            .submenu {
                overflow: hidden;
                max-height: 0;
                -webkit-transition: all 0.5s ease-out;
            }
        </style>