Cách Tạo Menu Đa Cấp
Khi bạn đã có kiến thức cơ bản về HTML và CSS bạn có thể tạo ra được cấu trúc của một website hoàn chỉnh và đẹp mắt. Có nhiều thứ để làm, để cấu tạo lên một trang web hoàn chỉnh cần trải qua một quá trình lâu dài. Trong bài viết này mình sẽ chia sẻ với bạn cách tạo ra menu đa cấp sử dụng HTML và CSS cơ bản.
Bạn đang xem: Cách tạo menu đa cấp
Tạo cấu trúc menu đa cấp HTML
Trong bài viết cuối cùng trong series học HTML cơ bản mình đã có đưa ra một được một tệp HTML chuẩn. Có một phân vùng chứa menu.

Trong bài viết này mình sẽ sử dụng lại tệp này để thiết kế một menu đa cấp. Mình sẽ viết một đoạn HTML sử dụng thẻ danh sách . Đoạn mã mẫu như sau
Menu số 2 Menu số 2.2 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".
Xem thêm: In Total Là Gì - Nghĩa Của Từ Total

Thêm CSS cho menu đa cấp
Bây giờ mình sẽ thêm CSS để làm menu đa cấp trở nên đẹp và hoạt động tốt hơn. Mình sẽ tạo ra một file có tên style.css và sử dụng phương pháp linked để liên kết css từ HTML. Mình sẽ để file css cùng thư mục với html nhé nên trong phần href chỉ cần gọi tên file là đủ.
Xem thêm:

Import css sử dụng phương thức linked
Tiếp theo là mở tệp css đã tạo và thêm đoạn code sau và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: