Выпадающее меню CSS

Создайте раскрывающийся список с помощью CSS, который можно наводить.

Демонстрация: пример раскрывающегося меню

Пример

Переместите указатель мыши на следующий пример:

Текст раскрывающегося меню

Hello World!

Ссылка 1 Ссылка 2 Ссылка 3
Изображение:кофе
кофе
Кофе

Основное раскрывающееся меню

Создает раскрывающийся блок,出现的条件是用户 наводит мышь на элемент.

Пример

<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

Попробуйте сами

Пример объяснение:

HTML

Откройте содержимое раскрывающегося меню с помощью любого элемента, например, элемента <span> или <button>.

Используйте контейнерный элемент (например, <div>) для создания содержимого раскрывающегося меню и добавьте в него любое содержимое.

Оберните эти элементы элементом <div>, используя CSS для правильной позиционирования содержимого раскрывающегося меню.

CSS

.dropdown Класс использования position: relativeКогда мы хотим разместить содержимое раскрывающегося меню под кнопкой (используя position: absolute) в этом случае необходимо использовать этот класс.

.dropdown-content Класс сохраняет фактическое содержимое раскрывающегося меню. По умолчанию он скрыт и будет отображаться при наведении (см. далее). Обратите внимание,min-width Установлено в 160px. Это значение можно изменить в любое время. Подсказка: если вы хотите, чтобы ширина раскрывающегося содержимого была такой же, как ширина кнопки, установите ширину в 100％ (установите) overflow: auto Реализует возможность прокрутки на экране малого размера。

Мы используем CSS box-shadow свойства, а не рамки, чтобы меню выглядело как "карточка".

Когда пользователь наводит курсор на кнопку:hover Выборщик используется для отображения выпадающего меню.

Выпадающее меню

Создайте выпадающее меню и позвольте пользователю выбрать опцию из списка:

Ссылка 1 Ссылка 2 Ссылка 3

Этот пример ähnelt dem vorherigen, außer dass wir Links im Dropdown-Container hinzugefügt und ihnen Stile zugewiesen haben, um sie mit dem Stil der Schaltfläche abzustimmen:

Пример

<style>
/* Установить стиль кнопки выпадающего списка */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* Контейнер <div> - необходимо поместить содержимое выпадающего списка */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Содержимое выпадающего списка (по умолчанию скрыто) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Ссылки в выпадающем списке */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Изменять цвет ссылок при наведении курсора */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Показывать меню при наведении курсора */
.dropdown:hover .dropdown-content {
  display: block;
}
/* Показывать содержимое выпадающего списка, изменяя цвет фона кнопки */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Ссылка 1</a>
    <a href="#">Ссылка 2</a>
    <a href="#">Ссылка 3</a>
  </div>
</div>

Попробуйте сами

Выпадающее содержимое с правым выравниванием

Ссылка 1 Ссылка 2 Ссылка 3
Ссылка 1 Ссылка 2 Ссылка 3

Если вы хотите, чтобы выпадающее меню открывалось справа налево, а не слева направо, добавьте right: 0;:

Пример

.dropdown-content {
  right: 0;
}

Попробуйте сами

Больше примеров

1 - Выпадающее изображение

Как добавить изображения и другое содержимое в выпадающее меню.

Поставьте указатель мыши на изображение:

кофе
кофе
Кофе

Попробуйте сами

2 - Выпадающее меню

Как добавить выпадающее меню в навигационной панели.

Попробуйте сами