Dưới đây là mã nguồn để tạo Mega Menu (menu dropdown toàn chiều rộng) bằng HTML và CSS:
Ví dụ
<!DOCTYPE html> <html> <head> <style> body { margin: 0; padding: 0; } *,*::before,*::after{ box-sizing: border-box; } nav { overflow: hidden; background-color: rgb(2, 161, 127); font-family: Arial, Helvetica, sans-serif; } nav a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .dropdown { float: left; overflow: hidden; } .dropdown .megaButton { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font: inherit; margin: 0; } nav a:hover, .dropdown:hover .megaButton { background-color: rgb(0, 63, 146); } .megaContent { text-align: center; display: none; position: absolute; background-color: #f9f9f9; width: 100%; left: 0; z-index: 1; } .megaContent .megaHeader { background: rgb(119, 6, 194); padding: 16px; color: white; } .dropdown:hover .megaContent { display: block; } .megaColumn { float: left; width: 50%; padding: 10px; background-color: rgb(233, 255, 198); height: 250px; } .megaColumn .links { color: black; padding: 16px; margin:10px; text-decoration: none; display: block; text-align: left; border-bottom: 4px solid rgb(69, 0, 90); } .megaColumn a:hover { background-color: lightblue; } .megaRow:after { content: ""; display: table; clear: both; } </style> </head> <body> <nav> <a class="links" href="#">Home</a> <a class="links" href="#">About</a> <a class="links" href="#">Contact Us</a> <a class="links" href="#">More Info</a> <div class="dropdown"> <button class="megaButton">Projects ></button> <div class="megaContent"> <div class="megaHeader"> <h2>Projects Menu</h2> </div> <div class="megaRow"> <div class="megaColumn"> <h3>Commercial</h3> <a class="links" href="#">Project 1</a> <a class="links" href="#">Project 2</a> </div> <div class="megaColumn"> <h3>Non-Commerial</h3> <a class="links" href="#">Project 1</a> <a class="links" href="#">Project 2</a> </div> </div> </div> </div> </nav> </body> </html>
Kết quả
Mã trên sẽ cho ra kết quả như sau:
Khi di chuột qua nút dropdown Projects:
