summaryタグをマウスオーバーで自動開閉するようにしたい場合

現在detailsとsummaryタグでドロップダウンのアコーディオンメニューを作成しております。
クリックすると内部がopen/closeになり、アコーディオンメニューが開閉するようになっているのですが
もしマウスオーバーで開閉したい場合、detailsとsummaryで対応できるのでしょうか？
やはり従来のようにbuttonとul/liでアコーディオンを作り直す必要があるのでしょうか。

detailsとsummaryタグでマウスオーバーを実装する事例について
検索したのですが出てこなかったため投稿させていただきました。
初歩的な質問で恐縮ですがどうぞよろしくお願い致します。

下記のようなdetails/summaryで実装しております。

html
1bootstrap4を使用
2
3<details class="account-btn">
4  <summary class="account-btn__title">アカウントメニュー</summary>
5  <ul class="details-content">
6     <li class="details-content__list"><a href="/userchange">ユーザ情報変更</a></li>
7     <li class="details-content__list"><a href="/logout">ログアウト</a></li>
8     <form id="hoge" action="fuga" method="POST" style="display: none;">
9     @csrf
10     </form>
11   </ul>
12</details>

最終的にdetails/summary　でこんな感じのことがしたいです。

HTML
1<div class="dropdown drop-hover">
2  <button class="account-btn__title dropdown-toggle" type="button" data-toggle="dropdown">
3　　　　　　　アカウントメニュー
4  </button>
5 　<ul class="dropdown-menu">
6     <li class="details-content__list"><a href=""/userchange>ユーザ情報変更</a></li>
7     <li class="details-content__list"><a href="/logout">ログアウト</a></li>
8     <form id="hoge" action="fuga" method="POST" style="display: none;">
9     @csrf
10     </form>
11  </ul>
12</div>