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

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

Задание

Легко

Теперь, когда ваше подменю добавлено, вы, вероятно, заметили, что оно выглядит не очень хорошо — оно постоянно на виду, а макет не совсем такой, как нам хотелось бы.

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

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

Установите цвет фона
Удалите стандартные стили списка с помощью 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>