Чтобы создать раскрывающееся меню при наведении курсора мыши с помощью JavaScript, вы можете использовать несколько методов. Вот несколько примеров:

Метод 1. Использование CSS и JavaScript

HTML:

<div class="dropdown">
  <button class="dropbtn">Hover Me</button>
  <div class="dropdown-content">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
  </div>
</div>

CSS:

.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown:hover .dropdown-content {
  display: block;
}

Метод 2. Использование прослушивателей событий JavaScript

HTML:

<div class="dropdown" onmouseover="showDropdown()" onmouseout="hideDropdown()">
  <button class="dropbtn">Hover Me</button>
  <div class="dropdown-content">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
  </div>
</div>

JavaScript:

function showDropdown() {
  document.getElementsByClassName("dropdown-content")[0].style.display = "block";
}
function hideDropdown() {
  document.getElementsByClassName("dropdown-content")[0].style.display = "none";
}

Метод 3. Использование CSS-переходов

HTML:

<div class="dropdown">
  <button class="dropbtn">Hover Me</button>
  <div class="dropdown-content">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
  </div>
</div>

CSS:

.dropdown-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s, opacity 0.5s;
}
.dropdown:hover .dropdown-content {
  opacity: 1;
  max-height: 200px;
}