✖

All TalkersCode Topics

Follow TalkersCode On Social Media

Simple And Best DropDown Menu With Pure CSS And HTML

Last Updated : Apr 15, 2022

IN - 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.

Simple And Best DropDown Menu With Pure CSS And HTML

CHECK OUT THIS TUTORIAL LIVE DEMO →

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.

CHECK OUT THIS TUTORIAL LIVE DEMO →

Latest Tutorials