JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dropdown">
  <button class="dropdown-toggle">選択してください</button>
  <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M7 10l5 5 5-5z"/>
  </svg>
  <ul class="dropdown-menu">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

CSS

.dropdown {
  position: relative; /* 子要素の基準となるように設定 */
  display: inline-block;
  width: 100%;
}

.dropdown-toggle {
  padding: 10px 20px;
  border: 1px solid #ccc;
  cursor: pointer;
  width: 100%;
}

.dropdown-arrow {
  position: absolute; /* 親要素を基準に配置 */
  top: 50%;
  right: 10px;
  transform: translateY(-50%); /* 垂直方向に中央揃え */
  width: 40px; /* SVG のサイズ調整 */
  height: 40px; /* SVG のサイズ調整 */
  fill: #333; /* SVG の色 */
  pointer-events: none;
}

.dropdown-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  display: none; /* 初期状態では非表示 */
}

.dropdown:hover .dropdown-menu {
  display: block; /* ホバー時に表示 */
}

.dropdown-menu li {
  padding: 10px;
  cursor: pointer;
}

.dropdown-menu li:hover {
  background-color: #f0f0f0;
}

JavaScript

const dropdownToggle = document.querySelector('.dropdown-toggle');
const dropdownMenu = document.querySelector('.dropdown-menu');

dropdownToggle.addEventListener('click', () => {
  if (dropdownMenu.style.display === 'block') {
    dropdownMenu.style.display = 'none';
  } else {
    dropdownMenu.style.display = 'block';
  }
});