Tạo menu đa cấp trong html

Trang chủ

Trong đoạn HTML bạn có thể thấy có nhiều list danh sách 

 lặp lại. Mỗi danh sách 
 là một cấp sẽ được hiển thị. Các thẻ 
 con sẽ nằm trong thẻ 
•  của thẻ 
   cha. Thẻ 
   cha sẽ có class "nav" các 
   sẽ có class "sub-menu".

  Bước 2: CSS để tạo menu xịn xò cho Website

  CSS để menu trông giống menu của một trang web nào

  .nav>li{
     float: left;
     margin-right: 15px;
   }
   
   .nav>li>a{
     text-transform: uppercase;
     color: red;
   }
   
   .nav li{
     position: relative;
     list-style:none;
   }
   
   .nav li a{
     padding: 10px;
     line-height: 20px;
     display: inline-block;
   }
   
   .nav .sub-menu{
     display: none;
     position: absolute;
     top: 0;
     left: 100%;
     width: 200px;
     background-color: #eee;
     padding: 5px 20px;
   }
   
   .nav li:hover>.sub-menu{
     display: block;
   }
   
   .nav>li>.sub-menu{
     top: 40px;
     left: 0;
   }

  Mình sẽ giải thích từng đoạn như sau:

  • .nav>li: Css này được áp dụng cho các thẻ 
  •  nằm ngay dưới thẻ 
     có class là nav. Thuộc tính float: left; sẽ giúp các phần tử nằm trên cùng 1 hàng, thuộc tính margin-right: 15px; sẽ giúp các phần tử cách nhau 15px về phía bên phải.
    • .nav>li>a: Css này tác động đến thẻ  nằm trong thẻ 
    •  con của thẻ 
       có class là nav. Thuộc tính text-transform: uppercase; sẽ giúp cho các đoạn text trong thẻ  in hoa lên, color: red; sẽ cho các text này hiển thị màu đỏ.
      • .nav li: Css này tác động đến tất cả các thẻ li nằm trong thẻ 
         có class là nav những thẻ 
        •  không nằm ngay dưới thẻ thẻ chứa class .nav cũng sẽ bị tác động. Thuộc tính position: relative; sẽ giúp các thẻ 
        •  không bị ảnh hưởng với bị trí ban đầu [xem bài: [CSS Căn bản] Các thuộc tính position trong CSS]. list-style:none; sẽ giúp xóa đi các dấu chấm mặc định trong thẻ 
        • .
        • .nav li a: Css này tác động đến tất cả thẻ  trong menu. Thuộc tính padding: 10px; giúp các thẻ a này có khoảng trống viền là 10px, line-height: 20px; làm chiều cao của dòng tăng lên 20px giúp text nằm giữ dòng, display: inline-block; sẽ giúp khóa hiển thị trên dòng, giúp các thuộc tính khác hoạt động tốt.
        • .nav .sub-menu: Thẻ này sẽ tác động lên các thẻ 
           có class .sub-menu nằm trong thẻ 
           có class .nav. Thuộc tính display: none; sẽ làm ẩn đi các thẻ này. position: absolute; sẽ giúp cho thẻ bám vào thẻ 
          •  có thuộc tính relative. top: 0; sẽ cho phần này không có khoản trống phía trên, left: 100%; sẽ giúp danh sách này nằm hoàn toàn về phía bên phải của thẻ 
          •  chứa nó. width: 200px; là chiều rộng của danh sách này, background-color: #eee; là màu nền cho danh sách này, padding: 5px 20px; sẽ giúp nó tạo khoản trống trên/dưới là 5px và phải/trái là 20px.
          • .nav li:hover>.sub-menu: Css này sẽ được thực thi khi rê chuột vào thẻ 
          • , Tác động lên các thẻ 
             có class .sub-menu. Thuộc tính display: block; sẽ giúp khóa hiển thị và giúp thẻ 
             trực tiếp dưới thẻ 
            •  được rê chuột vào hiển thị.
            • .nav>li>.sub-menu: Css này tác động lên các thẻ 
               có class .sub-menu. Hai thuộc tính trong đó mình sẽ không nhắc lại nữa.

              Cùng xem kết quả nhé:

              See the Pen Thuc hanh CSS Menu by Nguyen The Cuong [@nguyen-the-cuong] on CodePen.

              Chào các bạn, Mình là Cường Thông Minh đây. Hi vọng các bạn sẽ tìm được những điều bổ ích qua những kiến thức mình chia sẻ. Bất cứ thắc mắc gì cứ để lại bình luận ở dưới nhé