How to add a basic dropdown menu to your blogger

In this tutorial i will show you how to add a basic dropdown navigation menu to your blogger powered blog so i recommend you create a test blog or download a backup copy of your template before doing anything as i cannot be held responsible if you mess your blog layout up.

for this tutorial i'm going to use the minima template however it should work with most blogger templates once you have your template go to layout > Edit html and paste the following code just before the <div id='content-wrapper'>

 <div id='nav'>
<ul>
<li class='firstchild'><a href='/'>Home</a></li>
<li><a href='#'>About</a>
<ul>
<li><a href='#'>Link 1</a></li>
<li><a href='#'>Link 2</a></li>
<li><a href='#'>Link 3</a>
<ul>
<li><a href='#'>Link 3a</a></li>
<li><a href='#'>Link 3b</a></li>
</ul>
</li>
<li><a href='#'>Link 4</a>
<ul>
<li><a href='#'>Link 4a</a></li>
<li><a href='#'>Link 4b</a></li>
<li><a href='#'>Link 4c</a></li>
<li><a href='#'>Link 4d</a></li>
</ul>
</li>
<li><a href='#'>Link 5</a></li>
</ul>
</li>

<li><a href='#'>Links</a>
<ul>
<li><a href='#'>Link 1</a></li>
<li><a href='#'>Link 2</a></li>
<li><a href='#'>Link 3</a></li>
<li><a href='#'>Link 4</a>
<ul>
<li><a href='#'>Link 4a</a></li>
<li><a href='#'>Link 4b</a></li>
</ul>
</li>
</ul>
</li>

<li><a href='http://www.blogger.com'>Blogger</a>
<ul>
<li><a href='http://help.blogger.com/'>Help Centre</a></li>
<li><a href='http://status.blogger.com/'>Blogger Status</a></li>
</ul>
</li>
</ul>
</div>

if you are not sure where to paste it see this screenshot note you will need to change every # to the actual link for the links to work like i have in the last link list now we are going to add some CSS code for the structure and style of the dropdown menu if you happen to know CSS you can tweak it further to your liking

#nav {
padding:0;
margin:0;
font-family: arial,helvetica,serif;
font-size: 16px;
clear:both;
}
#nav ul {
padding:0;
margin:0;
list-style:none;
line-height:1;
}
#nav a {
display:block;
width:10em;
margin:0;
padding:3px 5px;
color:#58a;
}
#nav a:hover{
text-decoration:none;
color:#fff;
background:#58a;
}
#nav ul li {
float:left;
width:10em;
border-bottom:1px solid #dcdcdc;
border-right:1px solid #dcdcdc;
border-top:1px solid #dcdcdc;
background:#fff;
overflow:hidden;
}
#nav ul li ul li {
border-top:0;
border-left:1px solid #dcdcdc;
}
#nav ul li ul li ul li {
border-top:0;
}
#nav ul li.firstchild{
border-left:1px solid #dcdcdc;
}
#nav ul li ul {
position: absolute;
margin:1px 0 0 -1px;
width:10em;
left:-999em;
}
#nav ul li ul ul {
margin:-23px 0 0 160px;
border-top:1px solid #dcdcdc;
}
#nav ul li:hover ul ul,
#nav ul li.sfhover ul ul {
left:-999em;
}
#nav ul li:hover ul,
#nav ul li li:hover ul,
#nav ul li.sfhover ul,
#nav ul li li.sfhover ul {
left:auto;
}

since IE 6 and 7 do not support the :hover pseudo-selector for non-links this will not work unless we add a small javascript thanks to htmldog for the script so go ahead and add the following script just before the closing tag

<script type='text/javascript'>
//<![CDATA[
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover"; }
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//]]>
</script>

THATS IT YOU ARE DONE

• Share this on del.icio.us
• Digg this!
• Stumble upon something good? Share it on StumbleUpon
• Add this to Google Bookmarks
• Tweet This!
• Share this on Facebook
• Subscribe
• Buzz up!