|
Метки: очистка ручная отмена |
| Строка 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); /* Эффект увеличения при наведении */
| |
| }
| |
