Отображение подменю

Часть раздела Мастерство CSS путешествия по HTML на Coddy. Урок 18 из 43.

Задание

Легко

Теперь, когда ваш submenu добавлен, вы, вероятно, заметили, что он выглядит не очень хорошо. Он всё время виден, а расположение элементов не такое, как нам нужно.

В этом уроке вы напишете CSS, чтобы по умолчанию скрыть submenu и показывать его при наведении, как в настоящем Dropdown-меню. Вы также добавите несколько простых стилей, чтобы сделать его аккуратнее.

Скрыть submenu по умолчанию
Используйте свойство display: none; для .submenu.
Показывать submenu при наведении
Используйте селектор .has-submenu:hover .submenu и установите значение display: block;.
Расположить submenu под родительским элементом
Установите position: absolute; для .submenu.
Убедитесь, что у .has-submenu установлено значение position: relative;, чтобы это работало.
Стилизовать submenu для более привлекательного вида

Задайте цвет background
Удалите стандартные стили списка с помощью list-style: none;
Добавьте отступ внутри каждого элемента с помощью padding: 10px;
Задайте подходящую ширину

Не стесняйтесь настраивать что угодно: цвета, шрифты, границы — сделайте это по-своему!

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

<html>
<head>
  <title>Dropdown Menu</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
 <section class="menu-panel">
  <h2>Hobby Club</h2>
  <nav class="top-menu">
    <ul class="menu-list">
      <li class="menu-item">Photography</li>
      <li class="menu-item">Cooking</li>
      <li class="menu-item has-submenu">
        Games
        <ul class="submenu">
          <li>Board Games</li>
          <li>Card Games</li>
          <li>Video Games</li>
        </ul>
      </li>
      <li class="menu-item">Drawing</li>
      <li class="menu-item">Music</li>
    </ul>
  </nav>
  <div class="menu-controls">
    <input type="text" class="search" placeholder="Search activities..." />
    <button class="cta-button">Join a Club!</button>
  </div>
  <div class="info-section">
    <p class="intro">Welcome to the Hobby Club community!</p>
    <p>Joining a hobby club is a great way to meet people who share your interests.</p>
    <p>You can learn new skills, have fun, and even discover talents you didn’t know you had!</p>
   </div>
</section>
</body>
</html>