@landen.nienow
Вы можете создать выпадающее меню на CSS с использованием комбинации псевдоклассов и позиционирования.
Вот пример кода для создания простого выпадающего меню:
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<nav> <ul> <li><a href="#">Главная</a></li> <li class="dropdown"> <a href="#">Услуги</a> <ul class="dropdown-menu"> <li><a href="#">Веб-дизайн</a></li> <li><a href="#">Веб-разработка</a></li> <li><a href="#">Маркетинг</a></li> </ul> </li> <li><a href="#">Контакты</a></li> </ul> </nav> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { display: inline-block; } nav ul li a { display: block; padding: 10px; text-decoration: none; } .nav ul li.dropdown:hover .dropdown-menu { display: block; } .dropdown-menu { display: none; position: absolute; background-color: #f9f9f9; border: 1px solid #ccc; padding: 10px; } .dropdown-menu li { display: block; } |
В этом примере выпадающее меню активируется при наведении курсора на пункт меню "Услуги". При этом, появляется подменю со списком услуг. Вы также можете настроить внешний вид выпадающего меню с помощью дополнительных CSS-свойств, таких как цвет фона, ширина, высота и т. д.