Horizontal Drop Down Menu with CSS3 Transitions!

Navigation bar or normally called as the Menu is among the top must have components of a blog. An attractive horizontal navigation bar can a great impact on your readers. With the use of only HTML and CSS you can create highly professional drop down menus. Today I'm gonna share with you a drop down menu that I just designed, it has the CSS3 transition effects which looks great. You can fully customize the color combination as per your blog's layout. It's just a simple code showing you how to create a drop down with CSS3 transitions. Let's start!

    

    Create and Add The Horizontal Drop Down Menu with CSS3 Transitions!

  1) Go to Blogger >> Layout.
  2) Add a Gadget and Select HTML/JavaScript.
  3) Paste the following code in it, place it just under the header and save it.

1. 
   
   <div id='navigbar'>
   
   <ul id='navig'>
   
   <li>
   
   <a href='#'>Home</a>
   
   </li>
   
   <li>
   
   <a href='#'>About</a>
   
   </li>
   
   <li>
   
   <a href='#'>Contact</a>
   
   </li>
   
   <li>
   
   <a href='#'>Sitemap</a>
   
   <ul> 
   
   <li><a href='#'>Sub Page #1</a></li> 
   
   <li><a href='#'>Sub Page #2</a></li> 
   
   <li><a href='#'>Sub Page #3</a></li> 
   
   </ul> 
   
   </li>
   
   </ul> 
   
   </div>
   
   

Replace # with your Page Links and the "Sub Page # 123" with your page names. (the blue colored code makes the drop down menu, you can copy and place it beneath any tab.)

  4) To add another tab just place this code above </ul>

1. 
   
   <li>
   
   <a href='#'>Your Tab Name</a>
   
   </li>
   
   
   

  5) Now Go to Blogger >> Template >> Edit HTML.

  6) Expand Widgets Template and Search for ]]></b:skin> and place the following code just above it.

1. 
   
   /*----- My Blogger News Drop Down Menu with CSS3 Transitions ----*/
   
   
   
   #navigbar {
   
   background: #646464; 
   
   width: 100%px;
   
   color: #FFF;
   
   margin: 0px;
   
   padding: 0;
   
   position: relative;
   
   height:35px;
   
   -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
   
   
   
   }
   
   
   
   #navig {
   
   margin: 0;
   
   padding: 0;
   
   }
   
   #navig ul {
   
   float: left;
   
   list-style: none;
   
   margin: 0;
   
   padding: 0;
   
   }
   
   #navig li {
   
   list-style: none;
   
   margin: 0;
   
   padding: 0;
   
   height:35px;
   
   
   
   }
   
   #navig li a, #navig li a:link, #navig li a:visited {
   
   color: #FFF;
   
   display: block;
   
   font:normal 12px Helvetica, sans-serif;
   
   margin: 0;
   
   padding: 9px 12px 10px 12px;
   
   text-decoration: none;
   
   
   
   
   
   }
   
   #navig li a:hover, #navig li a:active {
   
   background: #BEBEBE;
   
   display: block;
   
   text-decoration: none;
   
   margin: 0;
   
   padding: 9px 12px 10px 12px;
   
   -webkit-transition:all .6s ease-in-out;-moz-transition:all .6s ease-in-out;-o-transition-duration:all .6s ease-in-out;transition:all .3s ease-in-out;
   
   -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
   
   
   
   
   
   }
   
   #navig li {
   
   float: left;
   
   padding: 0;
   
   
   
   }
   
   #navig li ul {
   
   z-index: 9999;
   
   position: absolute;
   
   left: -999em;
   
   height: auto;
   
   width: 160px;
   
   margin: 0;
   
   padding: 0;
   
   -webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-o-transition-duration:all .1s ease-in-out;transition:all .1s ease-in-out;
   
   }
   
   #navig li ul a {
   
   width: 140px;
   
   
   
   }
   
   #navig li ul ul {
   
   margin: -25px 0 0 161px;
   
   }
   
   #navig li:hover ul ul, #navig li:hover ul ul ul, #navig li.sfhover ul ul, #navig li.sfhover ul ul ul {
   
   left: -999em;
   
   
   
   
   
   }
   
   #navig li:hover ul, #navig li li:hover ul, #navig li li li:hover ul, #navig li.sfhover ul, #navig li li.sfhover ul, #navig li li li.sfhover ul {
   
   left: auto;
   
   }
   
   #navig li:hover, #navig li.sfhover {
   
   position: static;
   
   }
   
   #navig li li a, #navig li li a:link, #navig li li a:visited {
   
   background: #BEBEBE; 
   
   width: 120px;
   
   color: #FFF;
   
   display: block;
   
   font:normal 12px Helvetica, sans-serif;
   
   margin: 0;
   
   padding: 9px 12px 10px 12px;
   
   text-decoration: none;
   
   z-index:9999;
   
   border-top:1px dotted #333;
   
   border-bottom:1px dotted #333;
   
   
   
   
   
   }
   
   #navig li li a:hover, #navig li li a:active {
   
   background: #787878; 
   
   color: #FFF;
   
   display: block;
   
   margin: 0;
   
   padding: 9px 12px 10px 12px;
   
   text-decoration: none;
   
   -webkit-transition:all .6s ease-in-out;-moz-transition:all .6s ease-in-out;-o-transition-duration:all .6s ease-in-out;transition:all .6s ease-in-out;
   
   }
   
   

         Customization!

• To change the background of the main menu , replace background: #646464; with your own value.
• To change the background of a tab , replace #BEBEBE
• To change the background color of the drop down menu, replace #BEBEBE;
• To change the background color of drop down menu when you hover your mouse over it, replace #787878;

Save your changes and you are done. :)
Share your comments and suggestions below! 

Peace and Happy Blogging!