JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sidebar">
  <nav class="navigation">
    <ul class="mainmenu">
      <li><a href="">Home</a></li>
      <li><a href="">About</a>
        <ul class="submenu">
          <li><a href="">Team</a></li>
          <li><a href="">Contact Us</a></li>
        </ul>
      </li>
      <li><a href="">Our Products</a></li>
    </ul>
  </nav>    
</div>

CSS

* {
  color: #fff;
}
    
.sidebar {
  position: fixed; /* grid */
  width:200px;
  height:100%;
  top:0;
  left:0;
  background-color: #292a2c;
  color: #000;
  overflow: hidden;
}

/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu {
  padding: 0;
  margin: 0;
}

/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
  display: block;
  text-decoration: none;
  padding: 10px;
}

/* add hover behaviour */
.mainmenu a:hover {
    background-color: #C5C5C5;
}

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

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

.submenu a
{
}
.submenu li
{
  padding-left: 15px;  
}

/* hover behaviour for links inside .submenu */
.submenu a:hover {
  background-color: #666;
}

/* this is the initial state of all submenus.
  we set it to max-height: 0, and hide the overflowed content.
*/
.submenu,
.submenu1{
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}