Как сделать всплывающее меню в css

Это можно сделать с помощью CSS и JavaScript. Вот пример, как это можно сделать:

Версия 1: с использованием чистого CSS

Для всплывающего меню мы можем использовать обычный HTML-элемент ul (список), который мы будем отображать как меню при наведении на него. Структура элементов будет следующей:

<!-- HTML-код -->
<div class="menu-container">
  <ul class="menu">
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</div>

<!-- CSS-код -->
<style>
  /* Скрыть список по умолчанию */
  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
  }

  /* Отображать список при наведении на контейнер */
  .menu-container:hover .menu {
    display: block;
  }
</style>

Это отобразит всплывающее меню при наведении на контейнер с классом .menu-container. Если у вас есть несколько меню на странице, каждый должен иметь уникальный класс.

Версия 2: с использованием JavaScript

С помощью JavaScript мы можем создать тот же эффект всплывающего меню, но уже с возможностью клика на элемент меню. Структура элементов в HTML будет такой же, как и в версии 1:

<!-- HTML-код -->
<div class="menu-container">
  <button class="menu-btn">Меню</button>
  <ul class="menu">
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</div>

<!-- CSS-код -->
<style>
  /* Скрыть список по умолчанию */
  .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
  }

  /* Отображать список при клике на кнопку */
  .menu-container.active .menu {
    display: block;
  }
</style>

<!-- JavaScript-код -->
<script>
  const menuContainer = document.querySelector('.menu-container')
  const menuBtn = menuContainer.querySelector('.menu-btn')
  
  menuBtn.addEventListener('click', () => {
    menuContainer.classList.toggle('active')
  })
</script>

В CSS мы устанавливаем display: none по умолчанию для списка (.menu), а затем показываем его, добавляя класс .active для родительского элемента (menu-container). В JavaScript мы добавляем обработчик событий click на кнопку (.menu-btn) и переключаем класс .active для родительского элемента при каждом клике.