Как сделать раскрывающийся список css

Чтобы создать раскрывающийся список с помощью CSS, можно использовать псевдокласс :hover и свойство display. Ниже приведен пример такого списка:

HTML:

<div class="dropdown">
  <a href="#">Раскрыть список</a>
  <ul>
    <li><a href="#">Пункт 1</a></li>
    <li><a href="#">Пункт 2</a></li>
    <li><a href="#">Пункт 3</a></li>
  </ul>
</div>

CSS:

.dropdown ul {
  display: none; /* Скрываем список */
}

.dropdown:hover ul {
  display: block; /* Показываем список при наведении на родительский элемент */
}

В данном примере список будет скрыт, а при наведении на элемент с классом .dropdown он покажется. Чтобы список исчезал снова при удалении указателя мыши, нужно убрать его с области пока что ещё видимости курсора и навести указатель мыши на элемент заново. Если вы захотите сделать список “dropdown” с выпадающим меню, то его стиль будет зависеть от выбранной вами производной этого пункта меню. В данном примере вариант множества реализаций выпадающего списка есть, например, во Фреймворке Bootstrap.