Với sự trợ giúp của mã HTML tốt và các quy tắc CSS đơn giản, bạn có thể tạo một menu popup đẹp có thể dễ dàng sửa đổi và bổ sung. Bằng cách sử dụng ngôn ngữ đánh dấu và Trang tính kiểu xếp tầng, bạn có thể đảm bảo rằng các menu hoạt động chính xác trong tất cả các trình duyệt.
Hướng dẫn
Bước 1
Đầu tiên, hãy xây dựng cấu trúc cơ bản của menu của bạn. Mở trình soạn thảo văn bản và tạo danh sách được đánh số với menu con hoạt động như một mục danh sách mẹ. Ví dụ:
-
Phần tử đầu tiên
- Mục thả xuống
- Dropdown2
Bước 2
Lưu danh sách đã tạo trong một tệp html riêng biệt. Tiếp theo, tạo một tệp có phần mở rộng.css và nhập tất cả các thông số của bảng định kiểu.
Bước 3
Loại bỏ bất kỳ phần đệm và dấu đầu dòng nào áp dụng trong danh sách dấu đầu dòng và đặt chiều rộng menu bằng các công cụ CSS: ul {list-style: none;
chiều rộng: 200px; }
Bước 4
Đặt vị trí tương đối của tất cả các mục trong danh sách bằng cách sử dụng thuộc tính position: ul li {position: relative; }
Bước 5
Tiếp theo, bạn cần thiết kế một menu con, mỗi phần tử trong số đó sẽ xuất hiện ở bên phải menu mẹ tại thời điểm con trỏ chuột ở mục: li ul {position: Absol;
trái: 199px;
đầu: 0;
không trưng bày; } Thuộc tính left nhỏ hơn một pixel so với chiều rộng của chính menu. Điều này cho phép các mục bật lên được định vị một cách thông minh mà không cần tạo đường viền kép. Thuộc tính display được sử dụng để ẩn menu con khi mở trang.
Bước 6
Tạo kiểu các liên kết như mong muốn bằng cách sử dụng các tùy chọn css thích hợp. Bao gồm tham số display: block để mỗi liên kết chiếm hết không gian mà nó đã dành cho nó.
Bước 7
Để làm cho menu xuất hiện tại thời điểm con trỏ ở trên nó (di chuột qua), bạn cần nhập mã: li: hover ul {display: block; }
Bước 8
Đặt các tùy chọn bổ sung để hiển thị các liên kết và liệt kê các mục như mong muốn.
Bước 9
Menu bật lên đã sẵn sàng. Bây giờ, nó vẫn là bao gồm thuộc tính trong tệp.html: Menu bật lên
