উদাহরণ
নিচের কোডটি CSS ব্যবহার করে একটি ড্রপডাউন নেভিগেশন বার তৈরি করার উদাহরণ:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> .menu-btn { background-color: #040008; color: white; padding: 16px; font-size: 20px; font-weight: bolder; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; border: none; } .dropdown-menu { position: relative; display: inline-block; } .menu-content { display: none; position: absolute; background-color: #017575; min-width: 160px; z-index: 1; } nav{ background-color: #017575; } .links,.links-hidden{ display: inline-block; color: rgb(255, 255, 255); padding: 12px 16px; text-decoration: none; font-size: 18px; font-weight: bold; } .links-hidden{ display: block; } .links{ display: inline-block; } .links-hidden:hover,.links:hover { background-color: rgb(8, 107, 46); } .dropdown-menu:hover .menu-content { display: block; } .dropdown-menu:hover .menu-btn { background-color: #3e8e41; } </style> </head> <body> <h2>Hover on the below dropdown button in navbar to open dropdown menu</h2> <nav> <a class="links" href="#">HOME</a> <a class="links" href="#">EMPLOYEES</a> <a class="links" href="#">CAREER</a> <div class="dropdown-menu"> <button class="menu-btn">Open <</button> <div class="menu-content"> <a class="links-hidden" href="#">Contact Us</a> <a class="links-hidden" href="#">Visit Us</a> <a class="links-hidden" href="#">About Us</a> </div> </div> </nav> </body> </html>
আউটপুট
উপরের কোডটি নিচের আউটপুটটি তৈরি করবে:
ওপেন বাটনের উপরে হোভার করলে নিচের আউটপুটটি তৈরি হবে:
