JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li class="has-child">item1
    <ul class="sub-menu">
      <li>item1-1</li>
      <li>item1-2</li>
      <li>item1-3</li>
    </ul>
  </li>
  <li>item2</li>
  <li class="has-child">item3
    <ul class="sub-menu">
      <li>item3-1</li>
      <li>item3-2</li>
      <li>item3-3</li>
    </ul>
  </li>
</ul>

<button class="menu-button">メニューを表示する</button>
<div class="menu">
  <ul>
    <li>メニュー1</li>
    <li>メニュー2</li>
    <li>メニュー3</li>
    <li>メニュー4</li>
  </ul>
</div>

CSS

.sub-menu {
  display: none;
}

.sub-menu.show {
  display: block;
}

.has-child::before {
  content: "▼";
  margin-right: 5px;
}


/* ボタン部分 */

.menu {
  transition: .6s ease;
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
}

.menu.active {
  opacity: 1;
  visibility: visible;
  height: 100%;
}

JavaScript

(function($) {
  $(function() {
    //リスト部分のhover
    $(".has-child").hover(
      function() {
        $(this).children(".sub-menu").addClass("show");
      },
      function() {
        $(this).children(".sub-menu").removeClass("show");
      }
    );

    //button部分のhover
    $(".menu-button").hover(
      function() {
        $(this).next(".menu").toggleClass("active");
				
        if ( $(this).next(".menu").hasClass("active") ){
        	$(this).text("メニューを閉じる");
        } else {
        	$(this).text("メニューを表示する");
        }
      },
      function() {
        return false;
      }
    );
  });
})(jQuery);