Thêm menu con

Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 17 trên 43.

Thử thách

Dễ

Trong dự án nhỏ này, bạn sẽ xây dựng từng bước một menu điều hướng thả xuống. Bắt đầu với thanh điều hướng trên cùng cơ bản, bạn sẽ thêm menu con bên dưới "Games" và tạo kiểu cho menu bằng các lớp giả CSS. Bạn cũng sẽ cải thiện thiết kế bằng thanh tìm kiếm và nút CTA, đồng thời tìm hiểu các khái niệm thiết kế web quan trọng như flexbox và kiểu tương tác.

Trong thử thách này, bạn sẽ bắt đầu xây dựng menu thả xuống bằng cách thêm menu con bên dưới mục menu "Games".

Bên trong <li class="has-submenu"> cho "Games", hãy thêm một <ul class="submenu"> mới.
Bên trong menu con, hãy tạo 3 mục <li> mới:
1. Board Games
2. Card Games
3. Video Games

Ở giai đoạn này, hãy tập trung viết cấu trúc HTML chính xác: chưa cần tạo kiểu.

Tự làm thử

<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
      </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>