Simple HTML & CSS Dropdown Menu Source Code: You may have seen different types of menu in many websites. There are many stylish menus, with JavaScript and jquery being used with HTML & CSS. But today I will show you the use of HTML and CSS as a Dropdown menu. This source code is really simple and easy to understand.
Simple HTML & CSS Dropdown Menu Source Code Checkout Here Below:
This Dropdown menu made with Only HTML & CSS. Copy source code from here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 |
<!DOCTYPE html> <html> <head> <title>Dropdown Menu</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> </head> <style type="text/css"> *{ margin: 0; padding: 0; } body{ background: #eee; font-size: 16px; font-family: sans-serif,arial; } .nav{ width: 1100px; height: 60px; margin: 0 auto; border-radius: 5px; } ul li{ list-style: none; width: 200px; line-height: 60px; position: relative; background: #222; box-shadow: 0px 2px 5px 0px grey; text-align: center; float: left; background-color: #010000; } ul li ul{ position: absolute; } .nav > ul > li:nth-of-type(1){ border-radius: 5px 0px 0px 5px; } .nav > ul > li:nth-of-type(5){ border-radius: 0px 5px 5px 0px; } ul li a{ color: #fff; width: 200px; height: 58px; display: inline-block; text-decoration: none; } ul li a:hover{ font-weight: bold; border-bottom: 2px solid #fff; } ul li ul{ display: none; } .nav ul li:hover ul{ display: block; } .fa{ margin-right: 5px; } .container{ width: 1000px; height: 200px; margin: 0 auto; padding:20px 20px; } @media screen and (max-width: 480px){ header{ width: 100%; } .nav{ display: none; width: 100%; height: auto; } ul li{ width: 100%; float: none; } ul li a{ width: 100%; display: block; } ul li ul{ position: static; } ul li ul li a{ background: #222; } .fa-list.modify{ display: block; } .container{ width: 100%; height: auto; } body{ overflow-x:hidden; } } </style> <body> <div class="menu"></div> <nav class="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Codes</a> <ul> <li><a href="#">HTML 5</a></li> <li><a href="#">CSS 3</a></li> <li><a href="#">JavaScript</a></li> </ul> </li> <li><a href="#">Projects</a> <ul> <li><a href="#">Project 1</a></li> <li><a href="#">Project 2</a></li> <li><a href="#">Project 3</a></li> </ul> </li> <li><a href="#">Contact</a></li> <li><a href="https://webdevtrick.com" target="_blank">About</a></li> </ul> </nav> </body> </html> |
I hope this post will useful to you, Thanks For Visiting.
For More Articles Visit Our Blog.
In this code you forgot the one code in style you must add float:left in ul li
ok, thanks for your comment. stay connected.
Ok
Thanks
Pls let me knowhow to have space to add my logo
[…] Now the select gradient in dropdown option. […]