Với sự trợ giúp của mã HTML có thẩm quyền và các quy tắc CSS đơn giản, bạn có thể tạo một menu bật lên, bổ sung và sửa đổi nó. Bằng cách sử dụng các bảng xếp tầng và các công cụ ngôn ngữ đánh dấu, bạn có thể đảm bảo rằng bản thân 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
Trước tiên, hãy giữ thanh menu cơ bản. Tạo danh sách được đánh số đặc biệt bằng menu con trong trình soạn thảo văn bản. Thông thường "Notepad" được sử dụng cho những mục đích này. Menu con hoạt động như một phần tử của danh sách mẹ. Ví dụ: Phần tử đầu tiên Phần tử khốiF Phần tử khối2 Phần tử trường3 Phần tử trường4 Phần tử trường5
Bước 2
Lưu danh sách này trong một tệp html riêng biệt. Sau đó, tạo một tệp.css. Nhập tất cả các thông số bảng định kiểu cần thiết. Làm điều này rất cẩn thận, bởi vì một sai lầm, và menu bật lên sẽ không hiển thị chính xác hoặc hoàn toàn không hoạt động.
Bước 3
Loại bỏ bất kỳ dấu đầu dòng và phần đệm nào được áp dụng trong danh sách dấu đầu dòng. Đặt chiều rộng của menu bằng các công cụ CSS: ul -style: none; width: 200px; }
Bước 4
Đánh dấu vị trí tương đối của tất cả các mục trong danh sách bằng thuộc tính có tên là position: ul li: rel; }
Bước 5
Sau đó, sắp xếp menu con, các phần tử sẽ xuất hiện từ menu mẹ sang phải khi con trỏ chuột qua mục: li ul: tuyệt đối; left: 199px; top: 0; display: none; }
Bước 6
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ị chính xác 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 7
Tạo kiểu cho các liên kết nếu cầ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 để các liên kết chiếm hết không gian dành riêng cho chúng. Để làm cho menu xuất hiện khi con trỏ chuột di chuột qua nó, hãy nhập mã sau: li: hover ul: block; }
Bước 8
Đặt các tùy chọn bổ sung để hiển thị các mục danh sách và liên kết như mong muốn. Bao gồm một thuộc tính trong tệp.html. Menu bật lên đã sẵn sàng để sử dụng.
