Dantes (обсуждение | вклад) Нет описания правки |
Dantes (обсуждение | вклад) Нет описания правки |
||
| Строка 1: | Строка 1: | ||
/* | /* Основные стили для контейнера выпадающего списка */ | ||
. | .DropdownContainer { | ||
position: relative; | |||
width: 200px; | |||
margin: 10px; | |||
} | } | ||
. | /* Стили кнопки выпадающего списка */ | ||
.DropdownButton { | |||
background-color: #28303e; | |||
color: white; | |||
padding: 10px; | |||
width: 100%; | |||
border: 2px solid black; | |||
border-radius: 5px; | |||
text-align: left; | |||
font-size: 16px; | |||
cursor: pointer; | |||
transition: background-color 0.3s ease; | |||
} | } | ||
. | .DropdownButton:hover { | ||
background-color: #3b3b3b; | |||
} | } | ||
. | /* Стили для скрытого списка */ | ||
.DropdownList { | |||
display: none; | |||
position: absolute; | |||
top: 100%; | |||
left: 0; | |||
width: 100%; | |||
padding: 0; | |||
margin: 0; | |||
background-color: #232323; | |||
border: 2px solid black; | |||
border-radius: 5px; | |||
list-style-type: none; | |||
box-sizing: border-box; | |||
z-index: 100; | |||
opacity: 0; | |||
transform: translateY(-10px); | |||
transition: opacity 0.3s ease, transform 0.3s ease; | |||
} | } | ||
. | /* Отображение списка при наведении */ | ||
.DropdownContainer:hover .DropdownList { | |||
display: block; | |||
opacity: 1; | |||
transform: translateY(0); | |||
} | } | ||
. | /* Стили для каждого элемента списка */ | ||
.DropdownList li a { | |||
display: block; | |||
padding: 8px 10px; | |||
color: white; | |||
text-decoration: none; | |||
background: #232323; | |||
border: 2px solid black; | |||
font-size: 14px; | |||
transition: background-color 0.3s ease, transform 0.3s ease; | |||
} | } | ||
. | .DropdownList li a:hover { | ||
background-color: #3b3b3b; | |||
transform: scale(1.05); /* Эффект увеличения при наведении */ | |||
/* | |||
} | } | ||
Версия от 08:46, 8 мая 2025
/* Основные стили для контейнера выпадающего списка */
.DropdownContainer {
position: relative;
width: 200px;
margin: 10px;
}
/* Стили кнопки выпадающего списка */
.DropdownButton {
background-color: #28303e;
color: white;
padding: 10px;
width: 100%;
border: 2px solid black;
border-radius: 5px;
text-align: left;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.DropdownButton:hover {
background-color: #3b3b3b;
}
/* Стили для скрытого списка */
.DropdownList {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding: 0;
margin: 0;
background-color: #232323;
border: 2px solid black;
border-radius: 5px;
list-style-type: none;
box-sizing: border-box;
z-index: 100;
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Отображение списка при наведении */
.DropdownContainer:hover .DropdownList {
display: block;
opacity: 1;
transform: translateY(0);
}
/* Стили для каждого элемента списка */
.DropdownList li a {
display: block;
padding: 8px 10px;
color: white;
text-decoration: none;
background: #232323;
border: 2px solid black;
font-size: 14px;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.DropdownList li a:hover {
background-color: #3b3b3b;
transform: scale(1.05); /* Эффект увеличения при наведении */
}