Я хочу, чтобы раскрывающийся список появлялся под верхней панелью навигации, когда она активна. Как я могу добиться тако ⇐ CSS

[Гость]

Поэтому я хочу, чтобы мой компонент раскрывающегося меню выдвигался из верхней части страницы, однако в настоящее время он перемещается над верхней панелью навигации.

Соответствующая логика JavaScript в моем раскрывающемся компоненте следующая:

return ( {открыт ? ( ) : ( )}

• Покупать по категориям {categories.map((категория, индекс) => (
• {titleIfy(категория)} ))}

) Затем я импортирую компонент в свой макет сюда;

Соответствующие стили CSS следующие:

.top-navbar-container { семейство шрифтов: «Поппинс»; размер шрифта: 16 пикселей; цвет: #000; дисплей: гибкий; положение: липкое; цвет фона: #4fbbff; отступ: 4 пикселя 12 пикселей; /* Заполнение по умолчанию */ стиль границы: сплошной; ширина границы: 0 0 1px; /* Граница только внизу */ цвет границы: #0083d7; высота: 75 пикселей; верх: 0; ширина: расчет (100% — 0 пикселей); оправдание-содержание: пространство между; } .top-navbar-wrapper { дисплей: гибкий; выровнять-элементы: по центру; /* Выравниваем логотип по остальной части навигационной панели */ } .категория-раскрывающийся список, .user-выпадающий список { положение: относительное; дисплей: гибкий; } .dropdown-кнопка { фон: нет; граница: нет; курсор: указатель; цвет: #003f66; высота: 60 ​​пикселей; ширина: 60 ​​пикселей; радиус границы: 50%; переполнение: скрыто; цвет фона: #fff; положение: относительное; верх: 3 пикселя; /* Принудительно опустить его вертикально */ } .category-list::before { содержание: ""; позиция: абсолютная; верх: -5 пикселей; высота: 20 пикселей; ширина: 20 пикселей; фон: #fff; преобразование: поворот (45 градусов); } .user-info-list::before { содержание: ""; позиция: абсолютная; верх: -5 пикселей; высота: 20 пикселей; ширина: 20 пикселей; фон: #fff; преобразование: поворот (45 градусов); справа: 125 пикселей; } .category-список { позиция: абсолютная; верх: 68 пикселей; цвет фона: #fff; радиус границы: 8 пикселей; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); отступ: 10 пикселей 20 пикселей; ширина: 275 пикселей; дисплей: нет; z-индекс: -100; } .user-info-список { позиция: абсолютная; верх: 68 пикселей; цвет фона: #fff; радиус границы: 8 пикселей; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); отступ: 10 пикселей 20 пикселей; ширина: 275 пикселей; дисплей: нет; справа: -110 пикселей; } .category-list.active, .user-info-list.active { дисплей: блок; непрозрачность: 1; видимость: видимая; переход: 0,3 с кубический-безье(0,3, 0,85, 0, 1); преобразование-происхождение: верх; } .category-list.inactive, .user-info-list.inactive { дисплей: блок; непрозрачность: 0; видимость: скрыта; переход: 0,3 с кубический-безье(0,3, 0,85, 0, 1); верх: -1000 пикселей; преобразование-происхождение: верх; } .категория-элемент, .user-элемент { отступ: 10 пикселей 0; border-top: 1px сплошной rgba(0, 0, 0, 0,05); дисплей: гибкий; выровнять-элементы: по центру; положение: относительное; } Я попробовал добавить значение z-index в верхнюю панель навигации, более низкое значение в раскрывающийся список и т. д., но это не решило проблему. Однако мне удалось решить всю эту проблему, удалив позиции: липкий, верх: 0 и ширину: Calc(100% - 0px) из контейнера .top-navbar-container. Итак, возможно ли заставить это работать, сохраняя свойство липкости навигационной панели?