Как добавить в меню подменю при наведении?

Для добавления подменю в меню при наведении мы можем использовать JavaScript и CSS, чтобы управлять отображением подменю и его поведением.

Прежде всего, мы создадим меню с помощью HTML и CSS. Пример кода может выглядеть следующим образом:

<nav>
  <ul id="main-menu">
    <li><a href="#">Пункт меню 1</a></li>
    <li><a href="#">Пункт меню 2</a>
      <ul class="sub-menu">
        <li><a href="#">Подпункт меню 2.1</a></li>
        <li><a href="#">Подпункт меню 2.2</a></li>
        <li><a href="#">Подпункт меню 2.3</a></li>
      </ul>
    </li>
    <li><a href="#">Пункт меню 3</a>
      <ul class="sub-menu">
        <li><a href="#">Подпункт меню 3.1</a></li>
        <li><a href="#">Подпункт меню 3.2</a></li>
        <li><a href="#">Подпункт меню 3.3</a></li>
      </ul>
    </li>
  </ul>
</nav>

Здесь второй и третий пункты меню имеют подменю соответственно.

Теперь приступим к JavaScript для обработки событий наведения мыши. Мы будем использовать события mouseover и mouseout для показа и скрытия подменю при наведении на соответствующий пункт меню.

// Получаем список пунктов меню
var menuItems = document.querySelectorAll("#main-menu li");

// Проходимся по каждому пункту меню и добавляем обработчики событий
menuItems.forEach(function(menuItem) {
  // Добавляем обработчик события наведения мыши
  menuItem.addEventListener("mouseover", function() {
    // Показываем подменю
    var subMenu = this.querySelector(".sub-menu");
    if (subMenu) {
      subMenu.style.display = "block";
    }
  });

  // Добавляем обработчик события ухода мыши с пункта меню
  menuItem.addEventListener("mouseout", function() {
    // Скрываем подменю
    var subMenu = this.querySelector(".sub-menu");
    if (subMenu) {
      subMenu.style.display = "none";
    }
  });
});

CSS стили помогут нам визуально скрыть подменю по умолчанию и отобразить его при наведении на пункт меню:

.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

#main-menu li:hover .sub-menu {
  display: block;
}

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

Это лишь один из возможных способов реализации подменю при наведении в JavaScript. В зависимости от требований и используемого фреймворка, вы можете изменить реализацию подменю.