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

Trong nội dung bài viết này mình đã áp 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 vẫn viết một quãng HTML thực hiện thẻ danh sách . Đoạn mã mẫu nhỏng sau
Menu số 2 Menu số 2.2 Trong đoạn HTML bạn có thể thấy có tương đối nhiều các mục list tái diễn. Mỗi danh sách là 1 trong những cấp sẽ được hiển thị. Các thẻ bé đang phía bên trong thẻ của thẻ phụ vương. Thẻ phụ vương sẽ có được class "nav" các sẽ sở hữu class "sub-menu".
Xem thêm: Listening Unit 5 Lớp 10 Listening Trang 53 Sgk Tiếng Anh Lớp 10

Thêm CSS mang lại thực đơn nhiều cấp
Bây giờ đồng hồ bản thân đang thêm CSS để triển khai thực đơn nhiều cung cấp trở cần đẹp mắt với chuyển động giỏi rộng. Mình sẽ tạo ra một file có tên style.css cùng áp dụng cách thức linked nhằm link css trường đoản cú HTML. Mình đang nhằm file css cùng thư mục cùng với html nhé phải vào phần href chỉ việc Điện thoại tư vấn tên file là đủ.
Xem thêm: Bài 2 Lịch Sử 12 - Giải Bài Tập Lịch Sử 12, Lịch Sử 12

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