Horizontal Drop Down menu Gives a better navigation to your blog.Every Blogger need a simple but highly efficient Drop Down menu using pure HTML and CSS code.
Today i explain about How to add highly efficient Horizontal Drop Down menu using pure HTML and CSS code.
Follow My Steps:
1. Login toblogger account.
2.Go to Layout Tab ->Add a Gadget option ->Take Html/Javascript ->paste below code.
Code for Horizontal Drop Down menu:
<div>
<ul id="vin">
<li><a href='#'>Home</a> </li>
<li> <a href='#'>About us</a></li>
<ul id="vin">
<li><a href='#'>Home</a> </li>
<li> <a href='#'>About us</a></li>
<li> <a href=''>Contact us</a></li>
<li><a href='#'>Ebooks</a>
<ul>
<li><a href='#'>CSE</a></li>
<li><a href='#'>ECE</a></li>
</ul>
</li>
<li><a href='#'>project</a>
<ul>
<li><a href='#'>project1</a></li>
<li><a href='#'>project2</a></li>
<li><a href='#'>project3</a></li>
</ul>
</li>
<li><a href='#'>language</a>
<ul>
<li><a href='#'>c#.Net</a></li>
</ul>
</li>
<li><a href='#'>Tutorials</a> </li>
</ul>
</div>
<li><a href='#'>Ebooks</a>
<ul>
<li><a href='#'>CSE</a></li>
<li><a href='#'>ECE</a></li>
</ul>
</li>
<li><a href='#'>project</a>
<ul>
<li><a href='#'>project1</a></li>
<li><a href='#'>project2</a></li>
<li><a href='#'>project3</a></li>
</ul>
</li>
<li><a href='#'>language</a>
<ul>
<li><a href='#'>c#.Net</a></li>
</ul>
</li>
<li><a href='#'>Tutorials</a> </li>
</ul>
</div>
<style>
#vin,#vin ul
{
list-style: none;
}
#vin
{
float: left;
}
#vin > li
{
float: left;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyEJaaNtHFRbSVYZMG55ohUoc1heN1q9YqJvubias88qE9jwEsw1IvoWjOwYzoqZvW2CPe2oEh2CjvUgcspFs1_zk0aLBdRDlOcium-MZx9AQ_Ld93rDbPDhaFx8UjvfFf00CQoSegEObT/s1600/Untitled-111.gif');
}
#vin li a
{
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#vin ul
{
position: absolute;
display: none;
z-index: 999;
}
#vin ul li a
{
width: 80px;
}
#vin li:hover ul
{
display: block;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyEJaaNtHFRbSVYZMG55ohUoc1heN1q9YqJvubias88qE9jwEsw1IvoWjOwYzoqZvW2CPe2oEh2CjvUgcspFs1_zk0aLBdRDlOcium-MZx9AQ_Ld93rDbPDhaFx8UjvfFf00CQoSegEObT/s1600/Untitled-111.gif');
}
</style>
#vin,#vin ul
{
list-style: none;
}
#vin
{
float: left;
}
#vin > li
{
float: left;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyEJaaNtHFRbSVYZMG55ohUoc1heN1q9YqJvubias88qE9jwEsw1IvoWjOwYzoqZvW2CPe2oEh2CjvUgcspFs1_zk0aLBdRDlOcium-MZx9AQ_Ld93rDbPDhaFx8UjvfFf00CQoSegEObT/s1600/Untitled-111.gif');
}
#vin li a
{
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#vin ul
{
position: absolute;
display: none;
z-index: 999;
}
#vin ul li a
{
width: 80px;
}
#vin li:hover ul
{
display: block;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyEJaaNtHFRbSVYZMG55ohUoc1heN1q9YqJvubias88qE9jwEsw1IvoWjOwYzoqZvW2CPe2oEh2CjvUgcspFs1_zk0aLBdRDlOcium-MZx9AQ_Ld93rDbPDhaFx8UjvfFf00CQoSegEObT/s1600/Untitled-111.gif');
}
</style>
View Demo:
Or you can add ur own image in url section...