Как сделать выпадающее меню в html

Рассмотрим простой стандартный способ создания выпадающего меню в HTML с использованием элемента <select> и <option>:

<select>
  <option value="value1">Option 1</option>
  <option value="value2">Option 2</option>
  <option value="value3">Option 3</option>
</select>

Этот код создаст выпадающий список с тремя опциями: "Option 1", "Option 2" и "Option 3". Каждая опция будет иметь значение, указанное в атрибуте value.

Чтобы обработать изменение выбранной опции, можно использовать атрибут onChange элемента <select> и добавить JavaScript-обработчик события. Например:

<select onChange="myFunction()">
  <option value="value1">Option 1</option>
  <option value="value2">Option 2</option>
  <option value="value3">Option 3</option>
</select>

<script>
  function myFunction() {
    var selectedValue = document.querySelector('select').value;
    console.log(selectedValue);
  }
</script>

В этом примере при выборе опции вызывается функция myFunction(), которая выводит значение выбранной опции в консоль.

Чтобы настроить внешний вид выпадающего списка, можно использовать CSS. Например, чтобы изменить цвет фона и цвет текста выбранных опций, можно добавить следующий код:

select option:checked {
  background-color: #007bff;
  color: #fff;
}

Этот код изменит фон выбранной опции на синий цвет и цвет текста на белый.

Выпадающий меню можно через абсолютное позиционирование. 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;
}

Как выглядит