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

Тег <select> в HTML используется для создания выпадающего списка в HTML форме. С помощью атрибута multiple можно создать список с выбором нескольких значений (список с множественным выбором). Пункты выпадающего списка определяются с помощью тега <option>. Тег <optgroup> определяет группы пунктов внутри выпадающего списка HTML.

Пример HTML-документа:

<select name="colors">
  <option value="1">Синий</option>
  <option value="2" selected>Зеленый</option>
  <option value="3">Желтый</option>
  <option value="4">Красный</option>
  <option value="5">Оранжевый</option>
  <option value="6">Черный</option>
</select>

Результат: select-example

0 0

Выпадающий список можно через абсолютное позиционирование. HTML код выглядит так:

<nav class="nav">
        <ul>
          <li>
            <span class="nav-title">Проекты</span>
            <ul class="sub-menu">
              <li><a href="#">Обзор и отзывы</a></li>
              <li><a href="#">Что такое проекты?</a></li>
              <li><a href="#">Как подготовиться?</a></li>
            </ul>
          </li>
        </ul>
</nav>

CSS код будет выглядеть так:

.nav li {
  position: relative;
}

.sub-menu {
  display: none; 
  position: absolute;
  left: 0; /*Данное указание не обязательно*/
}

.nav li:hover > .sub-menu {
  display: block;
  width: max-content;
}

Как выглядит

enter image description here

0 0

Есть что добавить? Зарегистрируйтесь

или войдите в аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Курсы по программированию в Хекслете

Программирование

Веб-разработка

Разработка, верстка и деплой сайтов и веб-приложений, трудоустройство для разработчиков

Frontend-разработка

Разработка внешнего интерфейса сайтов и веб-приложений и верстка

Создание сайтов

Разработка сайтов и веб-приложений на JS, Python, Java, PHP и Ruby on Rails

Backend-разработка

Разработка серверной части сайтов и веб-приложений

Тестирование

Ручное тестирование и автоматизированное тестирование на JS, Python, Java и PHP

Аналитика данных

Сбор, анализ и интерпретация данных на Python

Интенсивные курсы

Интенсивное обучение для продолжающих

DevOps

Автоматизация настройки локального окружения и серверов, развертывания и деплоя

Математика для программистов

Обучение разделам математики, которые будут полезны при изучении программирования

Тест-драйв

JavaScript

Разработка сайтов и веб-приложений и автоматизированное тестирование на JS

Python

Веб-разработка, автоматическое тестирование и аналитика данных на Python

Java

Веб-разработка и автоматическое тестирование на Java

PHP

Веб-разработка и автоматическое тестирование на PHP

Ruby

Разработка сайтов и веб-приложений на Ruby on Rails

Go

Курсы по веб-разработке на языке Go

HTML

Современная верстка с помощью HTML и CSS

SQL

Проектирование базы данных, выполнение SQL-запросов и изучение реляционных СУБД

Git

Система управления версиями Git, регулярные выражения и основы командой строки

Бесплатные курсы

Бесплатные курсы по тестированию, дата-аналитике, верстке, программированию на Python, Java, PHP и JavaScript.

Похожие вопросы