JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navLinks">
      <ul>
        <li>Operations</li>
        <li class="has-sub">
          Service Analytics
           <ul class="sub-menu">
          <li>Incidents</li>
          <li>Problems</li>
          <li>Change Request</li>
          <li>Service Request</li>
        </ul>
        </li>
       
        <li>CIO</li>
        <li>Solarwinds</li>
      </ul>
    </div>

CSS

.navLinks {
  font-weight: 500;
  margin-top: 10%;
  width: 100%;
}

.navLinks ul {
  text-decoration: none;
}

.navLinks ul li {
  text-decoration: none;
  display: block;
  padding: 1em 0.5em;
  width: 100%;
  color: #132f63;
  cursor: pointer;
}

.navLinks ul li:hover {
  background-image: linear-gradient(to right, #dfe0fc, rgb(243, 243, 243));
}
.sub-menu {
  height: 0;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
  overflow: hidden;
  width: 100%;
  padding-left: 2em;
}

.sub-menu li {
  width: 100%;
}
.sub-menu li:hover {
  background-image: linear-gradient(to right, #d6d8ff, rgb(243, 243, 243));
}

.show-submenu {
  height: 100%;
}

JavaScript

document.querySelector('.has-sub').addEventListener('click', toggleSubmenu)
 
 function toggleSubmenu() {
      let subMenu = document.querySelector(".sub-menu");
      subMenu.classList.toggle("show-submenu");
      let arrow = document.querySelector(".fa-chevron-right");
      arrow.classList.toggle("fa-rotate-90");
    }