Hiển thị menu con

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

Thử thách

Dễ

Giờ bạn đã thêm menu con, có lẽ bạn nhận thấy nó trông chưa đẹp lắm. Menu luôn hiển thị và bố cục chưa như mong muốn.

Trong bài học này, bạn sẽ viết CSS để ẩn menu con theo mặc định và hiển thị menu khi di chuột qua, giống như một menu thả xuống thực tế. Bạn cũng sẽ thêm một vài kiểu đơn giản để menu trông gọn gàng hơn.

Ẩn menu con theo mặc định
Dùng thuộc tính display: none; trên .submenu.
Hiển thị menu con khi di chuột qua
Dùng bộ chọn .has-submenu:hover .submenu và đặt display: block;.
Đặt menu con bên dưới mục cha
Đặt position: absolute; trên .submenu.
Đảm bảo .has-submenu có position: relative; để cách này hoạt động.
Tạo kiểu cho menu con để giao diện đẹp hơn

Đặt màu nền
Xóa kiểu danh sách mặc định bằng list-style: none;
Thêm khoảng cách bên trong mỗi mục bằng padding: 10px;
Đặt chiều rộng phù hợp

Bạn cứ tùy chỉnh mọi thứ theo ý mình, từ màu sắc, phông chữ đến đường viền!

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