|
|
| Строка 2: |
Строка 2: |
| @import url('https://fonts.googleapis.com/css?family=Merriweather|Cormorant Infant|PT Mono|Neucha|MedievalSharp|Spectral SC|Kurale|El Messiri|Ledger'); | | @import url('https://fonts.googleapis.com/css?family=Merriweather|Cormorant Infant|PT Mono|Neucha|MedievalSharp|Spectral SC|Kurale|El Messiri|Ledger'); |
|
| |
|
| .button {
| |
| display: grid;
| |
| place-items: center;
| |
| width: var(--header-button-size);
| |
| height: var(--header-button-size);
| |
| border-radius: var(--border-radius-base);
| |
| contain: strict;
| |
| }
| |
|
| |
|
| /* Контейнер выпадающего списка */
| |
| .dropdown {
| |
| position: relative;
| |
| display: inline-block;
| |
| }
| |
|
| |
| /* Кнопка для открытия списка */
| |
| .dropbtn {
| |
| background-color: #0078d7; /* Цвет кнопки (можно изменить) */
| |
| color: white;
| |
| padding: 10px 15px;
| |
| font-size: 16px;
| |
| border: none;
| |
| cursor: pointer;
| |
| border-radius: 5px;
| |
| }
| |
|
| |
| /* Контейнер списка (изначально скрыт) */
| |
| .dropdown-content {
| |
| display: none;
| |
| position: absolute;
| |
| background-color: white;
| |
| min-width: 160px;
| |
| box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
| |
| border-radius: 5px;
| |
| z-index: 1000;
| |
| }
| |
|
| |
| /* Стиль для ссылок внутри списка */
| |
| .dropdown-content a {
| |
| color: black;
| |
| padding: 10px 15px;
| |
| text-decoration: none;
| |
| display: block;
| |
| }
| |
|
| |
| /* Эффект наведения на ссылки */
| |
| .dropdown-content a:hover {
| |
| background-color: #f1f1f1;
| |
| }
| |
|
| |
| /* Показываем список при наведении */
| |
| .dropdown:hover .dropdown-content {
| |
| display: block;
| |
| }
| |
|
| |
| /* Показываем список при клике (нужен JS) */
| |
| .dropdown.active .dropdown-content {
| |
| display: block;
| |
| }
| |
|
| |
|
|
| |
|