JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="left-menu">
    <li><a href="/0.html">1</a>
        <ul>
            <li><a href="/1.html">1</a>
                <ul>
                    <li><a href="/1.html">1.1</a></li>
                    <li><a href="/2.html">1.2</a></li>
                </ul>
            </li>
            <li><a href="/3.html">3</a></li>
            <li><a href="/4.html">4</a></li> 
        </ul>
    </li>
    <li><a href="/5.html">2</a></li>
    <li><a href="/6.html">3</a></li> 
</ul>

CSS

body{
    background: #05294f;
}
ul.left-menu{
	 list-style:none;
	 margin:0;  
	 margin-bottom:8px;
	 position: relative;  
}
ul.left-menu li{
	  padding: 10px 56px;
    list-style: none;
    position: relative; 
}
ul.left-menu li ul li {
    padding: 10px 0px;
}
ul.left-menu li ul li a:before {
	  content: "•";
    color: #dadada;
    font-size: 21px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}
ul.left-menu li a {
  display:block;
	  font-size:100%;
	  color:#fff;
	  font-weight:bold;
	  text-decoration:none;
} 
ul.left-menu a:hover {
    background:#f5a51a; 
}

JavaScript

$(".left-menu>li>a").on('click',function(e){
       e.preventDefault();
       $(this).next().toggle();
    });