CÁCH TẠO MENU ĐA CẤP
Khi bạn đã sở hữu kỹ năng cơ bản về HTML và CSS chúng ta có thể tạo thành được cấu trúc của một trang web hoàn hảo và ưa nhìn. Có những sản phẩm để làm, nhằm cấu tạo lên một website hoàn chỉnh đề nghị trải qua một quy trình lâu bền hơn. Trong bài viết này bản thân đang chia sẻ cùng với các bạn cách tạo ra thực đơn đa cấp cho áp dụng HTML và CSS cơ bạn dạng.
Bạn đang xem: Cách tạo menu đa cấp
Tạo cấu tạo menu đa cấp cho HTML
Trong bài viết cuối cùng vào series học tập HTML cơ phiên bản mình đã gồm đưa ra một được một tệp HTML chuẩn. Có một phân vùng cất menu.

Trong bài viết này bản thân đã sử dụng lại tệp này nhằm kiến thiết một thực đơn đa cung cấp. Mình đang viết một đoạn HTML sử dụng thẻ danh sách . Đoạn mã mẫu mã nhỏng sau
Menu số 2 Menu số 2.2 Trong đoạn HTML bạn cũng có thể thấy có rất nhiều danh mục list lặp lại. Mỗi list là một cung cấp sẽ được hiển thị. Các thẻ nhỏ sẽ phía bên trong thẻ của thẻ cha. Thẻ cha sẽ sở hữu được class "nav" những sẽ có class "sub-menu".
Xem thêm: In Total Là Gì - Nghĩa Của Từ Total

Thêm CSS đến menu đa cấp
Bây giờ đồng hồ mình sẽ thêm CSS để gia công menu nhiều cấp trsinh hoạt phải đẹp mắt và vận động giỏi hơn. Mình sẽ tạo ra một tệp tin có tên style.css và thực hiện phương pháp linked để link css trường đoản cú HTML. Mình đang nhằm file css cùng thỏng mục với html nhé buộc phải trong phần href chỉ việc call thương hiệu file là đủ.
Xem thêm:

Import css áp dụng cách làm linked
Tiếp theo là mnghỉ ngơi tệp css đang 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 đang phân tích và lý giải từng đoạn như sau:
.nav>li: Css này được vận dụng cho các thẻ ở tức thì dưới thẻ có class là nav. Thuộc tính float: left; để giúp các phần tử nằm trong thuộc 1 hàng, trực thuộc tính margin-right: 15px; để giúp các thành phần biện pháp nhau 15px về phía mặt đề xuất..nav>li>a: Css này ảnh hưởng đến thẻ phía trong thẻ nhỏ của thẻ tất 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; đang cho các text này hiển thị red color..nav li: Css này tác động mang đến toàn bộ những thẻ li nằm trong thẻ tất cả class là nav đông đảo thẻ ko nằm ở dưới thẻ thẻ cất class .nav cũng biến thành bị tác động. Thuộc tính position: relative; để giúp các thẻ không trở nên tác động cùng với bị trí lúc đầu (coi bài: