Trang chủ
CSS
Thanh điều hướng CSS
Thanh điều hướng ngang
Dùng thử: Menu thả xuống bên trong thanh điều hướng
Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <head> <style> body { nền-color:white; } ul { kiểu danh sách: không có; lề: 0; phần đệm: 0; tràn: ẩn; màu nền: #38444d; } li { float: trái; } li a, .dropbtn { display: inline-block; màu trắng; căn chỉnh văn bản: giữa; phần đệm: 14px 16px; trang trí văn bản: không có; } li a:hover, .dropdown:hover .dropbtn { màu nền: đỏ; } li.dropdown { display: khối nội tuyến; } .dropdown-content { hiển thị: không có; vị trí: tuyệt đối; màu nền: #f9f9f9; chiều rộng tối thiểu: 160px; bóng hộp: 0px 8px 16px 0px rgba(0,0,0,0.2); chỉ số z: 1; } .dropdown-content a { color: black; phần đệm: 12px 16px; trang trí văn bản: không có; hiển thị: khối; căn chỉnh văn bản: trái; } .dropdown-content a:hover {background-color: #f1f1f1;} .dropdown:hover .dropdown-content { display: block; } </style> </head> <body> <ul> <li><a href="#home">Trang chủ</a></li> <li><a href="#news">Tin tức< /a></li> <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Thả xuống</a> <div class="dropdown-content"> <a href="#">Liên kết 1</a> <a href="#">Liên kết 2</a> <a href="#">Liên kết 3</a> </div> </li> </ ul> <h3>Menu thả xuống bên trong Thanh điều hướng</h3> <p>Di chuột qua liên kết "Thả xuống" để xem menu thả xuống.</p> </body> </html>