Jquery – vertical left navigation with flyout submenus

I am looking to be able to run navigation down the lefthand side of the page with submenus appearing on the right side/border of the navigation (z-index so as not to push the main content out of the way).
Does anyone have a site/code link (codepen) or perhaps a code snippet that could assist? I am looking for an onclick rather than a hover event for the submenus to appear…
The first submenu level is only using .dropdown:hover .dropdown-content and not any jquery, not really bothered if it needs to be jscript or jquery. Many Thanks

<style>
* {margin: 0; padding: 0;}
html, body {height: 100%;}
body {background: #fff; padding: 0; margin: 0; font-family: Myriad-Pro, Arial, 'Varela Round', sans-serif; font-size: 16px;}

.quotation-window {display: flex; height: 100%}
.window-container {display: flex; flex-direction: row; flex-wrap: wrap; width: 100%;}
.header-one {display: flex; width: 100%; background-color: #dbdbdb; padding: 20px 10px;}
.header-two {display: flex; width: 100%; background-color: #afafaf; padding: 20px 10px;}
.content-container {display: flex; width: 100%; height: 100%}
.content-left {
    display: flex;
    background-color: #3f51b5;
    color: #fff;
    padding: 0;
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 80px;
    align-content: flex-start;
    height: 100%;
    width: 9vw;
}
.content-right {display: flex; background-color: #6d6d6d; padding: 20px 10px; width: 95%;}

ul {
    list-style-type: none;
    background-color: #3f51b5;
    color: #fff;
}
ul li ul.submenu {display: none;}
li a {
  display: block;
  color: #ffffff;
  padding: 8px 16px;
  text-decoration: none;
}
.dropdown-content li a {
    display: flex;
    color: #000000;
    padding: 8px 0;
    text-decoration: none;
}
li a:active {background-color: #3f51b5;  color: white;}
/*li a:hover:not(.active) {background-color: #ffcc01; color: black;}*/

.dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}
.dropdown li {height: 4vh; color: #000;}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 999;
    left: 8.5vw;
    top: 0;
    height: 100vh;
    flex-direction: row;
    flex-wrap: wrap;
}
.dropdown-submenu {
    position: relative;
    display: inline-block;
    width: 100%;
}
.dropdown-content-submenu {

    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    padding: 12px 16px;
    z-index: 999;
    left: 11.1vw;
    top: 0;
    height: 100vh;
    flex-direction: row;
    flex-wrap: wrap;

}
.dropdown:hover .dropdown-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
}
.dropdown-submenu:hover .dropdown-content-submenu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
}

@media screen and (max-width: 900px) and (min-width: 340px) {
    .quotation-window {display: flex; height: 100%}
    .content-container {
        display: flex;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .content-left {
        height: fit-content;
        padding: 0;
        width: 100%;
    }
    .content-right {
        padding: 20px 0;
        width: 100%;
        height: 100%;
    }
    ul {display: inline-flex;}
    .dropdown {display: inline-flex;}
    .dropdown:hover .dropdown-content {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: 80%;
    }
}
</style>

<section class="quotation-window">

    <div class="window-container">
        <div class="header-one">header 1</div>
        <div class="header-two">header 2</div>
        <div class="content-container">
            <div class="content-left">
                <ul class="dropdown">
                    <li><a href="#home" class="dropdown">New</a>
                        <ul class="dropdown-content">
                            <li><a href="#" class="dropdown-submenu">submenu navigation 1</a>
                                <ul class="dropdown-content-submenu">
                                    <li>submenu navigation 1.1</li>
                                    <li>submenu navigation 1.2</li>
                                    <li>submenu navigation 1.3</li>
                                    <li>submenu navigation 1.4</li>
                                    <li>submenu navigation 1.5</li>
                                </ul>                            
                            </li>
                            <li>submenu navigation 2</li>
                            <li>submenu navigation 3</li>
                            <li>submenu navigation 4</li>
                            <li>submenu navigation 5</li>
                        </ul>
                    </li>
                    <li><a href="#news">Existing</a></li>
                    <li><a href="#contact">Inventory</a></li>
                </ul>
            </div>
            <div class="content-right">right column content</div>
        </div>
    </div>

</section>