まずjQueryをlinkでつける

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

上記をheadタグに置いておく

そして、以下のような構成のhtmlを書く

<div class="accordion-item">
  <h2 class="accordion-header">
    <button class="accordion-button">ボタンだよ</button>
  </h2>
  <div class="accordion-collapse">
    <ul>
      <li>aaa</li>
   </ul></div>
</div>


そして以下のようなstyleを入れる。

<style>
  .accordion-header {
     position: relative;
     cursor: pointer;
     transition: all .5s ease;
  }
  .accordion-header::before,
     .accordion-header::after{
     position: absolute;
  }
  .accordion-collapse {
     display: none;
  }
</style>

あとはjavascriptのコードを入れるだけ

<script>
  $(document).ready(function() {
    $('.accordion-button').on('mouseover', function() {
       var findElm = $(this).parent().next(".accordion-collapse");
       $(findElm).slideToggle();
    });
  });
  $(document).ready(function() {
    $('.accordion-item').on('mouseleave', function() {
      $(".accordion-collapse").slideUp(500);
    });
  });
</script>

cssに関してはChatGPTなどで肉付けしてもらうと良いでしょう。