In this tutorial we will teach you how to make a simple and best dropdown menu using CSS and HTML. You can also make dropdown from jquery and java script.
CHECK OUT THIS TUTORIAL LIVE DEMO →
To Make Simple and Best DropDown Menu it takes only two steps:-
- Make a HTML file and define markups
- Make a CSS file and define styling for markups
Step 1. Make a HTML file and define markups
We make a HTML file and save it with a name menu.html
<html> <head> <link rel="stylesheet" type="text/css" href="menu_style.css"> </head> <body> <center> <ul> <li id="link1" class="mainlink"><a href="#" class="main_anchor">Link1 <ol class="link1_sublink"> <li><a href="#">Sublink1</a></li> <li><a href="#">Sublink2</a></li> <li><a href="#">Sublink3</a></li> </ol> </li> <li class="mainlink"><a href="#" class="main_anchor">Link2</a></li> <li class="mainlink"><a href="#" class="main_anchor">Link3</a></li> <li class="mainlink"><a href="#" class="main_anchor">Link4</a></li> <li class="mainlink"><a href="#" class="main_anchor">Link5</a></li> </ul> </center> </body> </html>
Step 2. Make a CSS file and define styling for markups
Now we define different stylings for dropdown menu and save the file named menu_style.css
ul,ol { margin:0px; padding:0px; margin-top:180px; box-shadow:inset 0px 0px 10px 0px grey; text-align:center; font-size:24px; font-family:helvetica; width:150px; } li { list-style-type:none; height:40px; line-height:40px; border:1px solid silver; border-left:none; border-right:none; } li:hover { background-color:#819FF7; box-shadow:inset 0px 0px 10px 0px #5882FA; border:1px solid #5882FA; border-left:none; border-right:none; } li:hover .main_anchor { color:white; } li a { display:block; color:grey; text-decoration:none; } .link1_sublink { visibility:hidden; display:none; } #link1:hover .link1_sublink { top:0px; left:585px; position:absolute; visibility:visible; display:block; } .link1_sublink li:hover a { color:white; }
That's all, this is how to make simple and best dropdown menu using pure CSS and HTML. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.
I hope this tutorial on dropdown menu CSS helps you and the steps and method mentioned above are easy to follow and implement.
Latest Tutorials
- Create Animated Skill Bar Using jQuery, HTML And CSS
- Simple And Best Responsive Web Design Using CSS Part 2
- Show Button On Hover Using HTML And CSS
- Material Design Login Form Using jQuery And CSS
- Animated Progress Bar Using jQuery And CSS
- Dynamic Drop Down Menu Using jQuery, Ajax, PHP And MySQL
- Get Website Statistics Using PHP, jQuery And MySQL
- HTML5 Login And Signup Form With Animation Using jQuery
- Facebook Style Homepage Design Using HTML And CSS
- View Webpage In Fullscreen Using jQuery