The Blogging Brew

Maintaining a clean, easy to use navigation menu is a huge part of creating an effective design. Too many links can confuse a reader, while too few can leave them wondering what they’re missing. A drop down menu is a great way to hide extra links while still making them available to curious readers.

While WordPress makes it easy to add a drop down menu (yay sub items!),it’s a little more complicated on Blogger. We’ll basically be creating a list within a list, and all that’s needed is some extra code and styling!

Place this code in an HTML/JavaScript widget placed in the navigation area.

<!--Start Navigation --> 
<div id="navigationbar">
<ul id='navigationcss'>
<li><a href="LINK1">Home</a></li> 
<li><a href="LINK2">Category</a>
<ul>
<li><a href='LINK3'>SUB-CATEGORY-1</a></li>
<li><a href='LINK4'>SUB-CATEGORY-2</a></li>
</ul>
</li>
<li><a href="">Category</a></li>
</ul>
</div>   
<!--End Navigation -->

Use this code to add another link:

<li><a href="LINK2">Category</a></li>

And this code to add another link with drop down categories:

<li><a href="LINK2">Category</a>
<ul>
<li><a href='LINK3'>SUB-CATEGORY-1</a></li>
<li><a href='LINK4'>SUB-CATEGORY-2</a></li>
</ul>
</li>

Fill in your information, save the widget, and head over to Template > Edit HTML (backup your template before editing any code as always!).

Now we’re going to add the styling that makes your menu look beautiful! First, open up the CSS section within

<b:skin> ... </b:skin>

Look for the Tabs section, which should look something like this:

/* Styles the first link in your menu */
.tabs-inner .section:first-child ul {
margin-top: -1px;
border: none;
}

/* Styles the overall navigation bar */
.tabs-inner .widget ul {
background: #000000;
border: none;
text-align: center;
}
/* Styles the individual links */
.tabs-inner .widget li a {
font: 12px Arvo;
border: none;
color: #ffffff;
}
/* Styles the links when hovered over */
.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: #333333;
background-color: #ffffff;
text-decoration: none;
}

You can either edit your current tabs section to your liking, or place the above one below your current one and use the comments provided to guide yourself. Play around with the values until you get the look you want!

Below that, paste the following code:

#navigationbar {
width: 100%; /* change the width of the navigation bar */
height: 35px; /* change the height of the navigation bar */
}

#navigationcss { 
margin: 0 auto;
padding: 0; 
}

#navigationcss ul { 
float: none; 
list-style: none; 
margin: 0; 
padding: 0; 
overflow: visible; 
}

#navigationcss li a, #navigationcss li a:link, #navigationcss li a:visited {
color: #ffffff; /* change color of the main links */
display: block;
margin: 0;
padding: 10px 30px;  /* change the first number for the top/bottom spacing, and the second number for left/right spacing */
}

#navigationcss li a:hover, #navigationcss li a:active {
color: #FF69B4 ; /* change the color of the links when hovered over */
margin: 0;
padding: 10px 30px; /* make sure these are the same as the section above! */
}

#navigationcss li li a, #navigationcss li li a:link, #navigationcss li li a:visited {
background: #ffffff;  /* change the background color of the drop down box */
width: 150px;
color: #000000; /* change the color of the drop down links */
float: none;
margin: 0;
padding: 7px 10px; /* similar to above, change for the spacing around the links */
}

#navigationcss li li a:hover, #navigationcss li li a:active {
background: #FF69B4 ; /* change the background color of drop down items on hover */
color: #ffffff; /* change the color of drop down links on hover */
padding: 7px 10px;  /* keep these the same as the above section */
}

#navigationcss li {
float: none; 
display: inline-block; 
list-style: none; 
margin: 0; 
padding: 0; 
}

#navigationcss li ul { 
z-index: 9999; 
position: absolute; 
left: -999em; 
height: auto; 
width: 150px; 
margin: 0;
padding: 0;
}

#navigationcss li:hover ul, #navigationcss li li:hover ul, #navigationcss li li li:hover ul, #navigationcss li.sfhover ul, #navigationcss li li.sfhover ul, #navigationcss li li li.sfhover ul { 
left: auto; 
} 

Use the comments to understand what each line does, and edit it until you have the style you want. Because templates can come from many sources, there’s a chance you could have issues with using this code on your blog if your current code has been altered a lot. If you run into any problems, feel free to email me! Including a link to your blog would be super helpful.

Is there something you’d love to see a tutorial on? This topic was one of my most requested tutorials, and I’d love to do more!