JSFiddle - React, Tailwind, and code Playground

HTML

<div class="accordion">
  <ul>
    <li class="parentmenu">
      <a href="#"><i class="fas fa-home"></i> Home</a>
      <ul class="dropdown">
        <li><a href="#">Home Submenu 1</a></li>
        <li><a href="#">Home Submenu 2</a></li>
      </ul>
    </li>

    <li class="parentmenu">
      <a href="#"><i class="fas fa-address-card"></i> About</a>
      <ul class="dropdown">
        <li><a href="#">About Submenu 1</a></li>
        <li><a href="#">About Submenu 2</a></li>
      </ul>
    </li>

    <li class="parentmenu">
      <a href="#"><i class="far fa-edit"></i> Services</a>
      <ul class="dropdown">
        <li><a href="#">Services Submenu 1</a></li>
        <li><a href="#">Services Submenu 2</a></li>
      </ul>
    </li>

    <li class="parentmenu">
      <a href="#"><i class="fas fa-id-card-alt"></i> Contact</a>
      <ul class="dropdown">
        <li><a href="#">Contact Submenu 1</a></li>
        <li><a href="#">Contact Submenu 2</a></li>
      </ul>
    </li>

  </ul>
</div>

CSS

.dropdown{
  display:none;
}

.deployed {
  display: block;
}

JavaScript

jQuery(document).ready(function() {
  $('.parentmenu').hover(function() {
    if ($(this).find('.dropdown').css('display') == 'none'){
      $(this).find('.dropdown').addClass('deployed');
    }
    else {
      $(this).find('.dropdown').removeClass('deployed');
    }
  });
});