Выпадающее меню и дропдауны

Пользуясь интернетом, вы наверняка уже видели выпадающее меню. Это когда наводишь мышью на элемент меню и появляется подменю.

Весь секрет в том, чтобы изначально скрыть выпадающее меню, а при наступлении какого-то события (наведение мыши на какую-то кнопку), отобразить выпадающее меню.

Сразу же перейдём к вёрстке. HTML предельно прост: есть меню, состоящее из четырёх элементов, а во втором элементе, помимо ссылки, есть вложенное меню.

<ul>
  <li>
    <a>Магазины</a>
  </li>
  <li>
    <a>Покупателям</a>
    <ul class="dropdown">
      <li>
        <a>Бонусная программа</a>
      </li>
      <li>
        <a>Подарочные карты</a>
      </li>
      <li>
        <a>Доставка</a>
      </li>
    </ul>
  </li>
  <li>
    <a>Юридическим лицам</a>
  </li>
  <li>
    <a>Контакты</a>
  </li>
</ul>

CSS тоже не слишком сложный. Фактически, все стили вертятся вокруг оформления. Единственное - применен "магический" селектор. На самом деле, никакой магии здесь нет. menu li:hover .dropdown означает, что при наведении курсора мыши :hover, на элемент меню menu li, дропдаун .dropdown получит некоторые стили, в данном случае, display: block.

* {
  box-sizing: border-box;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0 auto 100px;
  max-width: 800px;
  display: flex;
}
ul li {
  display: block;
  position: relative;
  width: 25%;
}
ul li a {
  padding: 8px 16px;
  background: lightblue;
  display: inline-block;
  width: 100%;
  text-decoration: none;
  color: black;
  text-align: center;
}
ul li a:hover {
  background: teal;
  color: white;
}
ul li:hover .dropdown { /* Магия здесь */
  display: block;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
  margin: 0;
  min-width: 100%;
  list-style: none;
}
.dropdown li {
  display: block;
  width: auto;
}
.dropdown li a {
  text-align: left;
}
  

a {
  cursor: pointer !important;
}
a:hover {
  text-decoration: underline;
}
@media print {
  .dropdown {
    display: block !important;
  }
  ul {
    margin-bottom: 250px;
  }
}

Результат представлен ниже. Попробуйте навести мышью на элементы меню.

Похожим способом можно сделать и дропдаун для кнопки

<button>О нас
  <ul class="dropdown">
    <li><a>О компании прессе</a></li>
    <li><a>Юридическая информация</a></li>
    <li><a>Контактная информация</a></li>
  </ul>
</button>

button {
  background: white;
  border: 1px solid gray;
  border-radius: 4px;
  padding: 8px 16px;
  position: relative;
  margin-bottom: 100px;
}

button:hover {
  background: lightblue;
}

*:hover > .dropdown { /* при наведении на любой элемент, содержащий .dropdown ... */
  display: block;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 16px;
  margin: 0;
  list-style: none;
  box-shadow: 0 0 5px 0 black;
  border-radius: 4px;
  background: white;
  min-width: 200px;
}

.dropdown li {
  display: block;
  margin-bottom: 8px;
  text-align: left;
}