Почему мобильное меню сворачивается, когда я нажимаю «Великобритания»? ⇐ CSS

[Anonymous]

У меня есть мобильное навигационное меню, созданное с помощью CSS и HTML, в котором для открытия и закрытия меню используется трюк с флажками. Проблема, с которой я столкнулся, заключается в том, что когда вы открываете меню и щелкаете в любом месте раздела .menu-content (UL), меню просто сворачивается. Я не могу понять, почему это происходит. Меню должно сворачиваться ТОЛЬКО при нажатии на диапазон .menu-icon. Вот мой код: https://codepen.io/QuantumCelestial/pen/GRzrGJG

Вот мой HTML:

.mobile-nav { отображение: вернуться; } /* Стиль закругленных углов для отображения свернутого меню */ .menu-wrap .menu-icon { положение: фиксированное; справа: -100 пикселей; верх: -100 пикселей; z-индекс: 100; ширина: 200 пикселей; высота: 200 пикселей; фон: #26877f; граница-радиус: 50% 50% 50% 50%; -webkit-transition: плавность выхода 0,5 с; переход: плавность входа и выхода 0,5 с; коробка-тень: 0 0 0 0 #26877f, 0 0 0 0 #26877f; курсор: указатель; } /* Значок меню гамбургера (средняя линия) */ .menu-wrap .гамбургер { позиция: абсолютная; верх: 135 пикселей; слева: 50 пикселей; ширина: 30 пикселей; высота: 2 пикселя; фон: #69d2e7; дисплей: блок; -webkit-transform-origin: центр; преобразование-происхождение: центр; -webkit-transition: плавность выхода 0,5 с; переход: плавность входа и выхода 0,5 с; } /* Создаём верхнюю и нижнюю строки и перемещаем верхнюю строку вверх */ .menu-wrap .hamburger::after, .menu-wrap .hamburger::before { -webkit-transition: плавность выхода 0,5 с; переход: плавность входа и выхода 0,5 с; содержание: ""; позиция: абсолютная; /* верх: -10 пикселей; */ дисплей: блок; ширина: 100%; высота: 100%; фон: #69d2e7; } /* Переместить верхнюю строку вверх */ .menu-wrap .hamburger::before { верх: -10 пикселей; } /* Переместить нижнюю строку вниз */ .menu-wrap .hamburger::after { внизу: -10 пикселей; } /* Убираем флажок ввода с дисплея */ .menu-wrap .toggler { дисплей: нет; } /* Создаем расширенный вид/эффект растущего круга */ .menu-wrap .toggler:checked + .menu-icon { box-shadow: 0 0 0 100vw #26877f, 0 0 0 100vh #26877f; граница-радиус: 0; /* Изменяем размеры поля переключателя, чтобы они соответствовали X */ ширина: 50 пикселей; высота: 50 пикселей; правильно: 0; верх: 0; } /* Изменение положения значка после изменения размеров поля */ .menu-wrap .toggler:checked + .menu-icon .hamburger { верх: 36 пикселей; слева: 0 пикселей; } /* Поворот строк */ .menu-wrap .toggler:checked + .menu-icon .hamburger { -webkit-transform: поворот (45 градусов); преобразование: поворот (45 градусов); } /* Поворот нижней строки */ .menu-wrap .toggler:checked + .menu-icon .hamburger::after { -webkit-transform: поворот (90 градусов); преобразование: поворот (90 градусов); внизу: 0; } /* Поворот верхней строки */ .menu-wrap .toggler:checked + .menu-icon .hamburger::before { -webkit-transform: поворот (90 градусов); преобразование: поворот (90 градусов); верх: 0; непрозрачность: 0; /* Добавлено для того, чтобы одна линия не была толще другой */ } /* Стилизация содержимого расширенного меню */ .menu-wrap .menu-content { размер шрифта: 3rem; тип стиля списка: нет; высота строки: 1,6; переход: все 15 лет – легко; видимость: скрыта; z-индекс: 200; положение: фиксированное; верх: 50%; осталось: 50%; -webkit-transform: транслировать(75%, -150%) масштаб(0); преобразование: трансляция (75%, -150%) масштаб (0); -webkit-transition: все 0,4 с. переход: все 0,4 с, плавность входа и выхода; /* переход: все 0,4 секунды легкость; */ } /* Показать содержимое меню при раскрытой навигации */ .menu-wrap .toggler:checked ~ .menu-content { видимость: видимая; -webkit-transform: транслировать(-50%, -50%) масштаб(1); преобразование: трансляция (-50%, -50%) масштаб (1); -webkit-transition-duration: 0,5 с; продолжительность перехода: 0,5 с; } /* Стилизация навигационных ссылок */ .menu-wrap a { поле-дно: 1em; дисплей: блок; цвет: #69d2e7; текстовое оформление: нет;

• Главная
• Продукты
• Информация
• Контакт