Как раскрыть меню которое скрытый под текстом когда сближать курсор к тексту?

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

Сначала создайте HTML-разметку, которая будет содержать ваше меню и текст, например:

<div class="container">
  <div class="text">Наведите курсор, чтобы открыть меню</div>
  <ul class="menu">
    <li><a href="#">Пункт меню 1</a></li>
    <li><a href="#">Пункт меню 2</a></li>
    <li><a href="#">Пункт меню 3</a></li>
  </ul>
</div>

Затем добавьте стили для скрытия меню и отображение его при наведении курсора:

.container {
  position: relative;
}

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

.text:hover + .menu {
  display: block;
}

Этот CSS-код скроет меню при загрузке страницы и будет отображать его только при наведении на текст. Мы используем селектор +, чтобы выбрать элемент .menu, который следует после .text, и таким образом изменять его стиль при наведении на .text.

Затем добавьте JavaScript для включения этой функциональности:

document.addEventListener('DOMContentLoaded', function() {
  var text = document.querySelector('.text');
  
  text.addEventListener('mousemove', function() {
    var menu = document.querySelector('.menu');
    menu.style.display = 'block';
  });
  
  text.addEventListener('mouseleave', function() {
    var menu = document.querySelector('.menu');
    menu.style.display = 'none';
  });
});

Этот код добавляет обработчики событий к элементу .text, чтобы отображать и скрывать меню при движении курсора по тексту. При наведении курсора мы изменяем стиль элемента .menu на display: block, а при уходе с элемента .text, мы скрываем меню, устанавливая стиль на display: none.

Если вы добавите этот CSS и JavaScript код к вашей веб-странице, то должны быть в состоянии увидеть, как меню раскрывается при приближении курсора к тексту.