How To Create A Drop Down Menu To Blogger/Blogspot

In this particular tutorial, I will show you how to create a drop down menu in a navigation. Just a simple code that can be fully customized to make your desired changes. A drop down menu is useful when you want your blog-content to be fully organized or simply wanting to be organized in your own blog. So lets start to the process.

How To Create a Drop Down Menu

Step 1. Proceed to Blogger Dashboard >> Lay-out>> Add gadget
Step 2. Select an HTML/JavaScript Widget just under the header and paste the following code inside it,

<div id='bttnavbar'>
      <ul id='bttnav'>
        <li>
          <a href='#'>Home</a>
        </li>
        <li>
          <a href='#'>About</a>
       </li>
        <li>
          <a href='#'>Contact</a>
        </li>
  <li>
           <a href='#'>Templates</a>
            <ul>
                <li><a href='#'>Hacks</a></li>
                <li><a href='#'>Downloads</a></li>
                <li><a href='#'>Advertise</a></li>
              </ul>
        </li>
      </ul>
    </div>
<br />

Short Customization:

Replace # with your own Page Links and the bold text ( green) with your relevant page names.
The orange bold code is responsible for the drop down menu.
If you want to make some drop down navigation,you can copy and paste it under any tab you want just before  </li>
To add another tab, paste this code above  </ul>

 Step 3. Click Save.

 Let us move to the second part of the tutorial 

 1. From the Blogger Dashboard >> Go to Template >> Edit HTML
 2. Backup your template then search for this piece of code, ]]><b/:skin>
 3. Just above it paste the code below,

/*----- BTT Drop Down Menu ----*/

#bttnavbar {
    background:  #158aee ;
    width: 960px;
    color: #FFF;
        margin: -20px; 30px; 0px; -10px;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;
}

#bttnav {
    margin: 0;
    padding: 0;
}
#bttnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#bttnav li {
    list-style: none;
    margin: 0;
    padding: 0;
 border-left:1px solid #333;
 border-right:1px solid #333;
        height:35px;
}
#bttnav li a, #bttnav li a:link, #bttnav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
   
}
#bttnav li a:hover, #bttnav li a:active {
    background: green;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
   

   
}
#bttnav li {
    float: left;
    padding: 0;
}
#bttnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#bttnav li ul a {
    width: 140px;
}
#bttnav li ul ul {
    margin: -25px 0 0 161px;
}
#bttnav li:hover ul ul, #bttnav li:hover ul ul ul, #bttnav li.sfhover ul ul, #bttnav li.sfhover ul ul ul {
    left: -999em;
}
#bttnav li:hover ul, #bttnav li li:hover ul, #bttnav li li li:hover ul, #bttnav li.sfhover ul, #bttnav li li.sfhover ul, #bttnav li li li.sfhover ul {
    left: auto;
}
#bttnav li:hover, #bttnav li.sfhover {
    position: static;
}
#bttnav li li a, #bttnav li li a:link, #bttnav li li a:visited {
    background: green;
    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-bottom:1px dotted #333;

}
#bttnav li li a:hover, #bttnavli li a:active {


    background: orange;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

Short Customization: (Optional)

Replace #158aee to change the background color of your Main menu
Replace the red highlighted text to change font color, size and family
Replace green to change the background of a tab on mouse hover
Replace green to change the background color of the drop down menu
Replace orange to change the background color of drop down menu upon mouse hover
Change the yellow highlighted text in order to change the borders of your tab names




Step 4.Save your template and you are done!