Элементы навигации не отображаются при наведении курсора на кнопку ⇐ CSS

[Anonymous]

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

Я попытался решить эту проблему, используя следующий код:

:is(header:hover, header:focus-within) nav { дисплей: блок;} Хотя приведенная выше модификация частично решила проблему, она приводит к отображению навигации при наведении курсора на весь заголовок. Мне нужна помощь, чтобы сделать навигацию видимой только при наведении курсора на кнопку. Как мне этого добиться правильно?

@import url('https://fonts.googleapis.com/css2?famil ... splay=swap'); * { маржа: 0; заполнение: 0; размер коробки: граница-коробка; } :корень { --HEADER-BGCOLOR: #333; --HEADER-COLOR: белый дым; } /*СТИЛИ ШРИФТОВ*/ html { размер шрифта: 1,5рем; семейство шрифтов: «Робото», без засечек; } тело { минимальная высота: 100vh; дисплей: гибкий; гибкий поток: столбец Nowrap; } заголовок { цвет фона: var(--HEADER-BGCOLOR); цвет: вар (--HEADER-COLOR); } .header-title-line { заполнение: 0,25 бэр 0,5 бэр; дисплей: гибкий; гибкий поток: строка Nowrap; оправдание-содержание: пространство между; } /*КНОПКА СБРОС*/ .меню-кнопка { цвет фона: прозрачный; граница: нет; ширина: 48 пикселей; высота: 48 пикселей; дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; положение: относительное; } /*ЗНАЧКА ГАМБУРГЕРА*/ .значок меню, .menu-icon::перед, .menu-icon::after { цвет фона: var (--HEADER-COLOR); ширина: 40 пикселей; высота: 5 пикселей; радиус границы: 5 пикселей; позиция: абсолютная; переход: все 0,5 с; } .menu-icon::перед, .menu-icon::after { содержание: ""; } .menu-icon::before { трансформировать: транслировать(-20px, -12px); } .menu-icon::after { трансформировать: транслировать(-20px, 12px); } /*ЗНАЧКА ГАМБУРГЕРА*/ :is(.кнопка меню:наведение, .menu-button:focus-within) .menu-icon { цвет фона: прозрачный; преобразование: поворот (720 градусов); } :is(.кнопка меню:наведение, .menu-button:focus-within) .menu-icon::before { преобразование: TranslateX (-20 пикселей) вращать (45 градусов); } :is(.кнопка меню:наведение, .menu-button:focus-within) .menu-icon::after { преобразование: TranslateX (-20 пикселей) вращать (- 45 градусов); } :is(.кнопка меню:наведение, .menu-button:focus-in) nav { дисплей: блок; } навигация { дисплей: нет; цвет фона: var(--HEADER-BGCOLOR); Transform-Origin: вверху по центру; анимация: showMenu 0,5 с, плавное перемещение вперед; } @keyframes showMenu { 0% { преобразование: масштабY (0); } 80% { преобразование: масштабY (1,2); } 100% { преобразование: масштабY(1); } } навигация ул { тип стиля списка: нет; дисплей: гибкий; гибкий поток: столбец Nowrap; } нав ли { отступ: 0,5рем; border-top: 1px Solid var(--HEADER-COLOR); } навигация { дисплей: блок; выравнивание текста: по центру; ширина: 80%; маржа: авто; } навигация а:любая-ссылка { цвет: вар (--HEADER-COLOR); начертание шрифта: жирный; текстовое оформление: нет; } навигация: наведите курсор, навигация а: фокус { преобразование: масштаб (1.2); переход: все 0,3 с; Компания Прегиса [*]Главная [*]Элемент1 [*]Элемент2 [*]Элемент3