Simple And Best DropDown Menu With Pure CSS And HTML.

Tuesday, Apr 4, 2017

Tags:- CSS HTML


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.


See Demo
DropDown


To Make Simple and Best DropDown Menu it takes only two steps:-

  1. Make a HTML file and define markups
  2. 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.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email