JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu-left">

   <ul id="nav-left">
  
   <li class="titre1"><p>Catégorie 1</p></li>
  <li class="puce"><a href="#">Item 1</a>
    <ul >
      <li><a href="#"><span>- Sub-Item 1 a</span></a></li>
      <li><a href="#"><span>- Sub-Item 1 b</span></a></li>
      <li><a href="#"><span>- Sub-Item 1 c</span></a></li>
    </ul>
  </li>
  <li class="puce"><a href="#">Item 2</a>
    <ul>
      <li><a href="#"><span>Sub-Item 2 a</span></a></li>
      <li><a href="#"><span>Sub-Item 2 b</span></a></li>
    </ul>
  </li>
  <li class="puce"><a href="#">Item 3</a>
    <ul>
      <li><a href="#"><span>Sub-Item 3 a</span></a></li>
      <li><a href="#"><span>Sub-Item 3 b</span></a></li>
      <li><a href="#"><span>Sub-Item 3 c</span></a></li>
      <li><a href="#"><span>Sub-Item 3 d</span></a></li>
    </ul>
  </li>
  <li class="puce"><a href="#">Item 4</a>
    <ul>
      <li><a href="#"><span>Sub-Item 4 a</span></a></li>
      <li><a href="#"><span>Sub-Item 4 b</span></a></li>
      <li><a href="#"><span>Sub-Item 4 c</span></a></li>
    </ul>
  </li>
  
   
</ul>


</div>

CSS

#menu-left{
	width:202px;
	height:auto;
	float: left;
	font-family:arial;
	font-size:12px;
	color: #4085be;
	margin:5px 0px 0px -28px;
}

#nav-left {
    width: 200px;
}

.titre1{
    background: #4085be;
	width:200px;
	height:28px;
	color:#fff;
	border:none;
}
.titre1 p{
  padding: 3px 0 5px 18px;
  margin-top:0;
	text-transform: uppercase;
}
.titre2{
    background: #4085be;
	width:200px;
	height:32px;
	color:#fff;
	border:none;
}
.titre2 p{
  padding: 8px 0 5px 18px;
  margin-top:0;
	text-transform: uppercase;
}

.top{
    background: url('top.png')
      no-repeat;
	width:200px;
	height:10px;
  list-style-type: none;
}

.bottom{
    background: url('bottom.png') no-repeat;
	width:200px;
	height:30px;
}

.puce{
	background: url('puce.gif')  no-repeat ;
	background-position: 8px 14px;
		list-style-type: none;
}

#nav-left li a {
    display: block;
	border-right: 1px solid #4085be;
    border-left: 1px solid #4085be;
    text-decoration: none;
	padding:8px 0 10px 18px;
}

#nav-left li a:hover, #nav li a:active {
    color: #005ca9;
}

#nav-left li a:visited {
	color: #4085be;
}

#nav-left li a span{
    padding:2px 0 2px 15px;
}

#nav-left li a span:hover, {
	background: none ; 
}

#nav-left ul {
    display: none; 
	list-style-type: none;
  margin:0;
}

#nav-left ul li{
margin-left:0px;
}

JavaScript

$(document).ready(function() {
  $('#nav-left > li > a').click(function() {
    if ($(this).attr('class') != 'active') {
      $('#nav-left li ul').slideUp();
      $(this).next().slideToggle();
      $('#nav-left li a').removeClass('active');
      $(this).addClass('active');
    }
  });
});