Как сделать так, чтобы при выпадающем меню не сдвигался текст?

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

Вот несколько шагов, которые помогут вам достичь нужного результата:

1. Первым делом, у вас должно быть основное меню и выпадающее меню. Обычно они реализуются с помощью HTML-элементов <ul> и <li>, хотя это может отличаться в зависимости от вашей конкретной реализации.

   <nav>
     <ul class="main-menu">
       <li>Главная</li>
       <li>О компании</li>
       <li class="dropdown">
         <a href="#">Услуги</a>
         <ul class="dropdown-menu">
           <li>Веб-разработка</li>
           <li>Дизайн</li>
           <li>Маркетинг</li>
         </ul>
       </li>
       <li>Контакты</li>
     </ul>
   </nav>

2. Примените CSS стили для основного меню и выпадающего меню. Сделайте основное меню плавающим (float: left), чтобы оно занимало только необходимое пространство. При этом задайте выпадающему меню положение абсолютное (position: absolute) и скрыть его изначально (display: none).

   .main-menu {
     list-style-type: none;
     margin: 0;
     padding: 0;
   }
   
   .main-menu li {
     float: left;
   }
   
   .dropdown {
     position: relative;
   }
   
   .dropdown .dropdown-menu {
     position: absolute;
     top: 100%;
     left: 0;
     display: none;
   }

3. Добавьте JavaScript код, чтобы показывать и скрывать выпадающее меню при наведении или нажатии на основное меню. Вы можете использовать обработчики событий, такие как mouseover или click, чтобы определить, когда показывать и скрывать выпадающее меню.

   document.addEventListener("DOMContentLoaded", function() {
     var dropdowns = document.querySelectorAll(".dropdown");
     
     for (var i = 0; i < dropdowns.length; i++) {
       dropdowns[i].addEventListener("mouseover", function() {
         this.querySelector(".dropdown-menu").style.display = "block";
       });
       
       dropdowns[i].addEventListener("mouseout", function() {
         this.querySelector(".dropdown-menu").style.display = "none";
       });
     }
   });

В этом примере мы добавляем обработчики событий mouseover и mouseout для основного меню с классом "dropdown". Когда курсор наводится на элемент с классом "dropdown", мы находим его дочерний элемент с классом "dropdown-menu" и показываем или скрываем его, устанавливая свойство display в соответствующее значение.

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