JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <ul class="menu">
    <li><a href="">Home</a></li>
    <li><a href="">Page 1</a></li>
    <li><a href="">Page 2</a>
      <ul class="submenu">
        <li><a href="">Subpage 2a</a></li>
        <li><a href="">Subpage 2b</a></li>
        <li><a href="">Subpage 2c</a></li>
      </ul>
    </li>
    <li><a href="">Page 3</a></li>
  </ul>
</nav>

CSS

nav {
    float: left;
    width: 200 px;
    position: fixed;
    top: 80px;
    left: 10px;
    border-top: 1px solid #9AA2B2;
    border-right: 1px solid #9AA2B2;
    border-left: 1px solid #9AA2B2;
}
.menu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu a {
    display: block;
    padding: 10px 15px;
    background: linear-gradient(to bottom, #7d7e7d 0%,#6B737E 100%); 
    border-top: 1px solid #9AA2B2;
    border-bottom: 1px solid #2E323A;
    text-decoration: none;
    color: white;
}

.menu a:hover {

    background: linear-gradient(to bottom, #3EB9E7 0%,#8abbd7 100%); 
}


.submenu a {

    padding: 10px 25px;
    background: linear-gradient(to bottom, #E2E2E2 0%,#fcfff4 100%);
    border-bottom: 1px solid #CFD0CF;
    color: black;
}

.submenu a:hover {

    background: linear-gradient(to bottom, #C5C6C5 0%,#d6dbbf 100%); 
  background-color: #C5C6C5;
}

.submenu {
  overflow: hidden;
  display: none;
}

JavaScript

$(document).ready(function () {
  $('.menu > li > a').hover(function(){
    if ($(this).attr('class') != 'deployed'){
      $('.menu li ul').slideUp();
      $(this).next().slideToggle();
      $('.menu li a').removeClass('deployed');
      $(this).addClass('deployed');
    }
  });
});