Блог

Я создаю базовый веб-сайт с выпадающим меню для переключения языков. Кажется, я не могу заставить выпадающий список отображаться за пределами навигационного div, даже после попытки, overflow: visible !important; как предложено в других потоках. Вместо этого мое выпадающее меню появляется внутри панели навигации, как показано ниже:

Кодовое обозначение для этого примера является https://codepen.io/mattiasjohnson/pen/VwbZbVm

Решение (правка):
Согласно комментарию С. Кузнецова, добавление position: absolute .lang-switch-hidden решило проблему.

Проблема

Привет. Такое поведение вашего навигационного модуля связано с тем, что вы не задаете его height правильность с точным значением. По умолчанию height значение равно auto . Из-за этого, когда .lang-switch-menu «s height растет, навигационный div» height увеличивается, чтобы избежать переполнения. Если вы установите для навигационного div height точное значение , например 2rem , вы увидите, что он больше не будет расти.

Решения

1. Установите height точный навигационный div :

 #navbar {
    color: black;
    background-color: #f1f1f1;
    margin-top: 1.5em;
    height: 2rem ;
} 

NB : Под точным значением я подразумеваю значение, которое не говорит навигатору вычислять его высоту в соответствии с его содержанием, например : fit-content или auto .

2.Этот код, добавленный в конце вашего css, может дать вам другой способ решения проблемы.

 .lang-switch-menu{
    position:relative;
}
.lang-switch-hidden{
  position:absolute;
}