How to Create dropdown menu using HTML CSS with source code
 |
DROPDOWN CODE
<!--DOCTYPE html--> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width= , initial-scale=1.0"> <title>Document</title> <style> nav{ float: left; /* padding-left: 20px; */ background-color: rgb(38, 38, 38); width: 100%; height: 28px; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; padding: 12px 6px; } ul { padding: 0; margin: 0; } .menu li{ float: left; list-style: none; /* padding: 8px; */ } .menu li a:hover{ background-color: rgb(255, 0, 38); } .menu li a { font-size: 1.5rem; padding: 12px 10px; color: white; text-decoration: none; } .d-menu{ display: none; background-color: rgb(0, 255, 153); margin-top: 12px; padding: 0; } .d-menu li { float: none; padding: 12px 0px; margin: 0; } .d-menu li a{ padding: 12px; color: crimson; } .d-menu li a:hover{ background-color: blueviolet; color: wheat; } .drop:hover .d-menu{ display: block; } </style> </head> <body> <nav> <ul class="menu"> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li class="drop"><a href="">WEB</a> <ul class="d-menu"> <li><a href="">HTML</a></li> <li><a href="">CSS</a></li> <li><a href="">JAVASCRIPT</a></li> </ul> </li> <li><a href="">Contact</a></li> </ul> </nav> </body> </html>