Почему в раскрывающемся списке не отображается весь контент, когда окно меньше? ⇐ CSS

[Anonymous]

Я новичок в HTML и CSS.

Я создавал макет сайта с использованием CodePen, чтобы накопить опыт их использования, но столкнулся с одной проблемой, несколькими препятствиями. Самое досадное на данный момент то, что при изменении размера окна в раскрывающемся списке отображается только одна ссылка. Изменение тега атрибута для включения дополнительной цифры или буквы или вообще выбор другого тега приводит к неактивным ссылкам или отображению текстового курсора при наведении на них курсора.

Я внедрил Кодекс (надеюсь)

Если нет, то следующая ссылка приведет вас к ручке:

https://codepen.io/Jessica-Rigby-White/pen/Pogoavd
тело { Поле: 0 пикселей; семейство шрифтов: Arial, Helvetica, без засечек; цвет фона: rgb(255, 154, 48); } /* v ПОЗИЦИОНИРОВАНИЕ НЕ РАБОТАЕТ v */ .dark-режим { цвет фона: черный; белый цвет; цвет границы: черный; } .button1 { выравнивание текста: ПРАВО; положение: фиксированное; плавать: вправо; отступ: 6 пикселей; поле: 8 пикселей; цвет фона: rgb(255, 255, 255, 0,2); } /* ^ ПОЗИЦИОНИРОВАНИЕ НЕ РАБОТАЕТ ^ */ /* O-ТОПНАВИГАЦИЯ */ /* О-ГЛАВНАЯ-НАВ */ .topnav { переполнение: скрыто; цвет фона: rgb(255, 255, 255, 0,2); граница: 3 пикселя сплошной RGB (255, 144, 26, 0,01); стиль границы-права: нет; стиль границы слева: нет; } .topnav .icon { дисплей: нет; } .topnav а { плыть налево; дисплей: блок; цвет: #f2f2f2; выравнивание текста: по центру; отступы: 14 пикселей 6 пикселей; текстовое оформление: нет; размер шрифта: 17 пикселей; } .topnav a:hover { цвет фона: rgb(255, 144, 26, 0,5); черный цвет; отступ: 6 пикселей; поле: 8 пикселей; радиус границы: 50 пикселей; } /* X-MAIN-NAV */ /* O-ПРОФИЛЬ */ .падать { плавать: вправо; переполнение: скрыто; } .dropdown .dropbtn { размер шрифта: 16 пикселей; граница: нет; контур: нет; белый цвет; отступ: 14 пикселей 16 пикселей; цвет фона: наследовать; семейство шрифтов: наследовать; маржа: 0; } .dropdown-content { дисплей: нет; позиция: абсолютная; цвет фона: черный; минимальная ширина: 160 пикселей; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-индекс: 1; справа: 0 пикселей; радиус границы: 8 пикселей; } .dropdown-content а { плавающий: нет; цвет: #ff901a; отступ: 12 пикселей 16 пикселей; текстовое оформление: нет; дисплей: блок; выравнивание текста: по левому краю; } .dropdown-content а:hover { цвет фона: RGB(255, 144, 26); черный цвет; начертание шрифта: жирный; } .dropdown:hover .dropdown-content { дисплей: блок; } .dropdown:hover .dropbtn { цвет фона: RGB(255, 144, 26); черный цвет; отступ: 6 пикселей; поле: 8 пикселей; радиус границы: 50 пикселей; начертание шрифта: жирный; } /* X-ПРОФИЛЬ */ /* О-ПОИСК */ форма .search-контейнера { радиус границы: 50 пикселей; цвет фона: нет; поле: 8 пикселей; } .search-container ввод { радиус границы: 50 пикселей; граница: нет; цвет фона: rgb(255, 144, 26, 0,5); размер шрифта: 17 пикселей; отступ: 6 пикселей; поле слева: 1%; } кнопка .search-container { отступы: 6 пикселей 10 пикселей; фон: RGB(255, 144, 26, 0,5); размер шрифта: 17 пикселей; граница: нет; контур: нет; курсор: указатель; цвет: белый; радиус границы: 50 пикселей; } .search-icon { белый цвет; } ::заполнитель { белый цвет; } .search-icon :hover { черный цвет; } Форма .search-container :hover {} /* X-ПОИСК */ /* X-ТОПНАВИГАЦИЯ */ /* ЗАГОЛОВОК */ .Заголовок { отступ: 15 пикселей; выравнивание текста: по левому краю; граница: 3 пикселя сплошной RGB (255, 255, 255, 0,2); стиль границы-права: нет; стиль границы слева: нет; } .Заголовок p1 { плавающий: нет; поле слева: 10 пикселей; начертание шрифта: жирный; размер шрифта: 20 пикселей; цвет: красный; } .Заголовок p2 { плавающий: нет; поле: 8 пикселей; размер шрифта: 10 пикселей; } /* X-ЗАГОЛОВОК */ /* О-СТРАНИЦЫ */ /* Ссылки на вкладки «Стиль» */ .tablink { цвет фона: rgb(255, 255, 255, 0,2); белый цвет; плыть налево; граница: нет; контур: нет; курсор: указатель; отступ: 14 пикселей 16 пикселей; размер шрифта: 17 пикселей; ширина: 25%; начертание шрифта: жирный; } /* Оформление содержимого вкладки (и добавление высоты: 100% для полного содержимого страницы) */ .tabcontent { белый цвет; дисплей: нет; отступ: 100 пикселей 20 пикселей; высота: 100%; } #Дом { цвет фона: rgb(255, 144, 26, 0,01); } #График { цвет фона: rgb(255, 144, 26, 0,01); } #Контакт { цвет фона: rgb(255, 144, 26, 0,01); } #О { цвет фона: rgb(255, 144, 26, 0,01); } .tablink:hover { цвет фона: rgb(255, 144, 26, 1); цвет: черный; } /* X-PAGETABS */ /* О-СОЦИАЛЬНАЯ БАР */ .icon-bar { положение: фиксированное; верх: 50%; -webkit-transform: TranslateY(-50%); -ms-transform: TranslateY(-50%); трансформировать: транслироватьY(-50%); } .icon-bar да { дисплей: блок; выравнивание текста: по центру; отступ: 16 пикселей; переход: все 0,3 секунды легкости; белый цвет; размер шрифта: 20 пикселей; граница-радиус: 10 пикселей 10 пикселей 10 пикселей 0 пикселей; } .icon-bar БД { дисплей: блок; выравнивание текста: по центру; отступ: 16 пикселей; переход: все 0,3 секунды легкости; белый цвет; размер шрифта: 20 пикселей; радиус границы: 0 пикселей 10 пикселей 10 пикселей 0 пикселей; } .icon-bar постоянного тока { дисплей: блок; выравнивание текста: по центру; отступ: 16 пикселей; переход: все 0,3 секунды легкости; белый цвет; размер шрифта: 20 пикселей; радиус границы: 0 пикселей 10 пикселей 10 пикселей 0 пикселей; } .icon-bar де { дисплей: блок; выравнивание текста: по центру; отступ: 16 пикселей; переход: все 0,3 секунды легкости; белый цвет; размер шрифта: 20 пикселей; радиус границы: 0 пикселей 10 пикселей 10 пикселей 10 пикселей; } .facebook { фон: RGB(255, 255, 255, 0,2); } .Google { фон: RGB(255, 255, 255, 0,2); } .linkedin { фон: RGB(255, 255, 255, 0,2); } .codepen { фон: RGB(255, 255, 255, 0,2); } .содержание { поле слева: 75 пикселей; размер шрифта: 30 пикселей; } .icon-bar да:hover { цвет фона: #3B5998; } .icon-bar БД:hover { цвет фона: #dd4b39; } .icon-bar постоянного тока:hover { цвет фона: #007bb5; } .icon-bar de:hover { цвет фона: #000000; } /* X-СОЦИАЛЬНАЯ БАР */ /* ПАГИНАЦИЯ */ .пагинация { поле: 10 пикселей; выравнивание текста: по центру; положение: фиксированное; внизу: 0; ШИРИНА: 100%; размер шрифта: 17 пикселей; } .пагинация c { белый цвет; плавающее: НЕТ; отступ: 5 пикселей 5 пикселей; текстовое оформление: нет; переход: цвет фона .3s; текстовое оформление: нет; поле: 0 пикселей; } .pagination c.active { цвет фона: rgb(255, 255, 255, 0,2); черный цвет; } .pagination c:hover:not(.active) { цвет фона: rgb(255, 255, 255, 0,2); } /* X-ПАГИНАЦИЯ */ /**/ @media screen и (максимальная ширина: 600 пикселей) { .topnav a:not(:first-child) { дисплей: нет; } .topnav a.icon { плавать: вправо; дисплей: блок; } } @media screen и (максимальная ширина: 600 пикселей) { .topnav.Response { положение: относительное; } .topnav.Response .icon { позиция: абсолютная; правильно: 0; верх: 0; } .topnav.Response { плавающий: нет; дисплей: блок; выравнивание текста: по левому краю; } .search-container.resposive форма { радиус границы: 50 пикселей; цвет фона: нет; поле: 8 пикселей; плавать: вправо; } .topnav.Response .dropdown {float: none;} .topnav.Response .dropdown .dropbtn { дисплей: блок; ширина: 100%; выравнивание текста: по левому краю; } } /**/ Новости Контакт О программе [url=javascript:void(0);] [/url] Войти Новости Связаться О программе НУБ УЧИТСЯ МЕДЛЕННО.. Главная Временная шкала О программе Контакт Главная Дом там, где сердце.. Хронология Несколько новостей в этот прекрасный день! О компании Кто мы и чем занимаемся. Контакт Свяжитесь с нами или загляните на чашечку кофе. « 1 2 3 4 5 6 » // О-ТОПНАВИГАЦИЯ функция myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += "отзывчивый"; } еще { x.className = "topnav"; } } // X-ТОПНАВИГАЦИЯ // O-TABS функция openPage(pageName, elmnt, color) { вар я, tabcontent, вкладки; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent.style.display = "нет"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < tablinks.length; i++) { tablinks.style.backgroundColor = ""; } document.getElementById(pageName).style.display = "блок"; elmnt.style.backgroundColor = цвет; } // Получаем элемент с id="defaultOpen" и кликаем по нему document.getElementById("defaultOpen").click(); // X-ТАБС // O-ТЕМНЫЙ РЕЖИМ функция Темный режим() { элемент вар = document.body; element.classList.toggle("Темный режим"); } // X-DARKMODE