Cách tạo: Menu con

Học cách sử dụng CSS để tạo menu con.

Tạo menu con

Bước 1 - Thêm HTML:

<!-- Tải Font Awesome icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Danh mục menu -->
<div class="navbar">
  <a href="#home">Trang chủ</a>
  <div class="subnav">
    <button class="subnavbtn">Về chúng tôi <i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="#company">Công ty</a>
      <a href="#team">Đội ngũ</a>
      <a href="#careers">Cơ hội nghề nghiệp</a>
    </div>
  </div>
  <div class="subnav">
    <button class="subnavbtn">Dịch vụ <i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="#bring">Chở theo</a>
      <a href="#deliver">Giao hàng</a>
      <a href="#package">Gói hàng</a>
      <a href="#express">Express</a>
    </div>
  </div>
  <div class="subnav">
    <button class="subnavbtn">Đối tác <i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="#link1">Link 1</a>
      <a href="#link2">Link 2</a>
      <a href="#link3">Link 3</a>
      <a href="#link4">Liên kết 4</a>
    </div>
  </div>
  <a href="#contact">Liên hệ</a>
</div>

Giải thích ví dụ:

Bạn có thể sử dụng bất kỳ phần tử nào để mở tử định hướng/drop-down menu, ví dụ như phần tử <button>, <a> hoặc <p>.

Sử dụng phần tử chứa (như <div>) để tạo menu tử định hướng và thêm liên kết tử định hướng vào đó.

Sử dụng phần tử <div> để bao bọc nút và <div> để định vị chính xác menu tử định hướng bằng CSS.

Bước 2 - Thêm CSS:

/* Menu định hướng */
.navbar {
  dư lượng: ẩn;
  màu nền: #333;
}
/* Liên kết định hướng */
.navbar a {
  chuyển động: trái;
  cỡ chữ: 16px;
  màu: trắng;
  canh giữa văn bản: giữa;
  keo dán: 14px 16px;
  decoration văn bản: không;
}
/* Menu tử định hướng */
.subnav {
  chuyển động: trái;
  dư lượng: ẩn;
}
/* Nút tử định hướng */
.subnav .subnavbtn {
  cỡ chữ: 16px;
  biên giới: không;
  hôm: không;
  màu: trắng;
  keo dán: 14px 16px;
  màu nền: di truyền;
  font-family: di truyền;
  khoảng cách: 0;
}
/* Thêm màu nền đỏ khi di chuột qua liên kết định hướng */
.navbar a:hover, .subnav:hover .subnavbtn {
  màu nền: đỏ;
}
/* Đặt樣式 cho nội dung tử định hướng - sử dụng vị trí tuyệt đối */
.subnav-content {
  hiển thị: không;
  vị trí: tuyệt đối;
  trái: 0;
  màu nền: đỏ;
  chiều rộng: 100%;
  z-index: 1;
}
/* Đặt樣式 cho liên kết tử định hướng */
.subnav-content a {
  chuyển động: trái;
  màu: trắng;
  decoration văn bản: không;
}
/* Thêm màu nền xám khi di chuột qua */
.subnav-content a:hover {
  màu nền: #eee;
  màu: đen;
}
/* Khi bạn di chuột qua khung tử định hướng con, mở nội dung tử định hướng */
.subnav:hover .subnav-content {
  display: block;
}

Thử ngay