Share our Blog

twitterfacebookgoogle plusrss feedemail
Subscribe via Email

Monday 8 July 2013

Horizontal Drop Down Menu For your Blog

 
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>
     <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>
<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:
menu


 
Or you can add ur own image in url section... 
 

You Might Also Like:

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...