How To Create a Drop Down Menu
Step 2. Select an HTML/JavaScript Widget just under the header and paste the following code inside it,
<div id='bttnavbar'>Step 3. Click Save.
<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>
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 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!
