EASIEST WAY TO MAKE DROPDOWN MENU IN CSS AND HTML

 Hi Guys Today I am Gonna show You How to Make a Dropdown Navigation Menu In Html and css . As Navigation Menu are the Fundamental Part Of every webpages You must need to know how to create it  . Here I'll Show You easiest way to do so . Lets start ..

Step 1)   Make a Nested Unordered List of Your Menu items
Step 2)   Reset The Page Attributes

Step 3)   Make The Horizontal Menu List with Block Display

Step 4)  Add Dropdown Visibility

Step 5)  Add Anchor Properties

Now I'll Show You the Real code Of HTML+CSS Dropdwon Menu .

 

<style>
ul
{
list-style: none;
padding: 0 ;
margin: 0;
}
ul li
{
display: block;
float: left;
position: relative;

}

ul li a
{
color: white;
display : block;
background-color: green;
text-decoration : none;
padding : 10 15 10 15;
margin-left: 5;
width: 130 ;
height : 20 ;
}

ul li a:hover
{
background-color: pink;

}

li ul
{
display: none;
}

li:hover ul
{
display: block;
position : absolute;

}

</style>

 

 

<div id="menu">

 

<ul>
<li> <a href=""> Sabin </a> </li>

<li><a href=""> First Bench </a>
<ul>
<li> <a href=""> Suraj</a></li>
<li><a href="">Umesh </a></li>
<li> <a href="">Rajan </a></li>
</ul>
</li>
<li> <a href="">Second Bench</a>
<ul>
<li><a href=""> Uttam</a></li>
<li><a href=""> Suman </a></li>
<li> <a href="">Rabin</a> </li>
</ul>
</li>
<li> <a href="">Third Bench</a>
<ul>
<li><a href=""> Roji</a></li>
<li> <a href="">Nilisma</a> </li>
<li> <a href="">Basu</a> </li>
</ul>
</li>
<li> <a href="">Dude's</a>
<ul>
<li><a href=""> Suresh</a></li>
<li> <a href="">Prashanta</a> </li>
<li> <a href="">RUPAAK</a> </li>
</ul>
</li>
</ul>
</div>

Documentation :

ul   : Handles Main list , Effect to all other lists

ul li : Main list , Makes menu Horizontal

ul li a : Main menu , specifies size , background color , padding etc.

ul li a : hover ->  If hovered the main menu 

li ul -> what to do with submenu at normal time

li:hover ul -> Submenu effect at hovered time

 

 

 

 Just Copy The Above Listed Code And paste In Notepad and save it as html document . After That Open In Browser like Firefox / chrome . If You do'not understood Any Line of code Please Comment Below . The Output will Looks like ,

 

 

[caption id="attachment_206" align="aligncenter" width="300"] Output[/caption]