Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
- Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
- Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
- Internet Explorer / Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
- Opera: Нажмите Ctrl+F5.
/* ==================================================
Begin стиль для выпадающего списка (ПК)
================================================== */
/* === Общие стили === */
.dropdown-container {
position: relative;
margin-left: 10px;
}
.dropdown {
border: 2px solid #000;
border-radius: 10px;
background-color: #28303e;
width: auto;
padding: 5px;
transition: background-color 0.3s ease;
}
.dropdown-item {
color: white;
font-size: 16px;
background: #232323;
padding: 8px 12px;
display: block;
text-decoration: none;
border: 2px solid #000;
margin-bottom: 5px;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.dropdown-item:hover {
background: #3b3b3b;
transform: scale(1.05); /* Эффект увеличения при наведении */
}
/* Скрытие и отображение выпадающего списка */
.dropdown-list {
display: none;
list-style-type: none;
margin: 0;
padding: 0;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: opacity 0.5s ease, max-height 0.5s ease;
}
.dropdown-container:hover .dropdown-list {
display: block;
max-height: 500px;
opacity: 1;
transition-delay: 0.2s;
}
/* Анимация при открытии */
.dropdown-container.open .dropdown-list {
display: block;
max-height: 500px;
opacity: 1;
transition: opacity 0.5s ease, max-height 0.5s ease;
}
/* ПК стили */
@media screen and (min-width: 1120px) {
.dropdown-container {
margin-left: 20px;
}
}
/* ==================================================
End стиль для выпадающего списка (ПК)
================================================== */