How to Add a Dropdown Menu with Submenu on Blogger?

Dropdown menu or horizontal submenu is a great option for bloggers and web designers in creating a simple but complete package of menu navigation. This kind of dropdown menu navigation will not only modernize the interface on you blog, but also, your blog will get a futuristic and modern look without being burdened with any javascript code whatsoever. Yeah, that's because by adding only some CSS styles and HTML codes, your blog will get a complete package of navigation menu, but also fast in page loading.

 Now, we will be able to make a dropdown menu that will drop many links when being pointed by the mouse cursor. By moving the mouse cursor inside the area of one of the menus, it will drop you another dropdown submenu along with the links, just like being shown in the picture below.

So, if you are interested on adding this dropdown menu on your Blogger blog, read the full post to figure it out how. Okay, if you are ready, then..

Anyway, the dropdown menu tutorial i am giving to you right now is also great to use to your blog because this dropdown menu only contains some CSS without any Javascript, so it will not weight up your blog in loading. There are many ways to make this dropdown menu, in this article, i will only teach you the 2 of many methods you can find around the internet.

First method ofAdding Drop-Down Menu

1. Login to Blogger Account
Now to begin this tutorial, let's go to Blogger.com and then Log in to your Blogger account using your own username along with the password.

2. Go to Layout and Edit HTML
In the Dashboard page, go to Layout/Design of your blog, and in the Page Element, press the sub-tab Edit HTML to begin editing the whole code of your template.

3. Find the code
By pressing the Ctrl + F buttons at the same time, you will enter the find mode. In this mode, you will be able to find any specific code in the template. Now find the code below:

]]></b:skin>

Anyway, before doing any kind of customization, i strongly suggest you to save your current template just in case you did something wrong with the template. Now click at the link Download Full Template.

4. Copy the code
Now copy the code of dropdown menu, and then paste it over ]]></b:skin>

/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_definition2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#menu {list-style-type:none; margin:5px; padding:0;}
#menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;}
#menu li dl {position:absolute; top:0; left:0;padding-bottom:5px;}
#menu li a, #menu li a:visited {text-decoration:none;}
#menu li dd {display:none;}
#menu li a:hover {border:0;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;}
#menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
#menu dl {width: 150px; margin: 0; padding: 0; background: #c9ba65;}
#menu dt {margin:0; padding: 5px 5px 5px 20px; font-size: 1.1em; color: #fff; border-bottom:1px solid #fff; border-top:1px solid #fff;}


#menu .one {background: #827b6b; border-top:5px solid #dca;}
#menu .two {background: #646e4c; border-top:5px solid #bb9;}
#menu .three {background: #a4a88d; border-top:5px solid #eec;}
#menu .four {background: #a29f68; border-top:5px solid #f8f8b8;}


#menu .one dt {background: #b2ab9b;}
#menu .two dt {background: #949e7c;}
#menu .three dt {background: #d4d8bd;}
#menu .four dt {background: #e2dfa8;}


#menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;}
#menu .one dd {border-bottom:1px solid #aaa;}
#menu .two dd {border-bottom:1px solid #e8e8e8;}
#menu .three dd {border-bottom:1px solid #eee;}
#menu .four dd {border-bottom:1px solid #999;}
#menu dd.last {border-bottom:1px solid #fff;}


#menu dt a, #menu dt a:visited {display:block; color:#444;}


#menu dd a, #menu dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 20px; width:125px;}


#menu .one dd a {background:#949e7c; color:#eee;}
#menu .two dd a {background:#d4d8bd; color:#346;}
#menu .three dd a {background:#e2dfa8; color:#654;}
#menu .four dd a {background:#b2ab9b; color:#ff8;}


#menu .one dd a:hover {background: #b2ab9b; color:#345;}
#menu .two dd a:hover {background: #949e7c; color:#543;}
#menu .three dd a:hover {background: #d4d8bd; color:#123;}
#menu .four dd a:hover {background: #e2dfa8; color:#534;}

5. Find the code
Now enter again the search mode by pressing Ctrl + F at the same time. And then go to the bottom and find this header section on the bottom position of the HTML code:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='your' type='Header'/> </b:widget> </b:section>

6. Replace the code
And then, replace the whole code on number 5 by using the code below:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Blogging Images (Header)' type='Header'/>
</b:section>

7. Save the current change and go to Page Element
Now press the Save Template button to save the current changes! And after that, switch back the sub-tab to Page element to begin embedding the HTML code of Drop-Down Menu.

8. Find the suitable area for the Drop-Down Menu
In the Page Element, now your task is to find the best position of the dropdown menu. I suggest you to use the top position of the layout because that is the suitable place for this widget.

9. Press the Add a Gadget link
After finding the best and suitable position for the dropdown menu, now in the area of that element, there is a link "Add a Gadget". Now press that link and you will be prompted with many options of what kind of gadgets do you want to embed to your blog. Now choose "HTML/javascript" in those options. After that, copy the code below and then paste it to the HTML/javascript box.

<ul id="menu"><!-- drop down menu start -->


<li>


<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->


<dl class="one">


<!-- Alter the links with your own -->


<dt><a href="Link URL address I">DEMOS</a></dt>


<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>


<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>


<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>


<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>


<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>


<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>


<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>


<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>


<dd class="last"><a href="../menu/em_images.html" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>


</dl>


<!--[if lte IE 6]></td></tr></table></a><![endif]-->


</li>


<li>


<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->


<dl class="two">


<dt><a href="Home Link URL address I">Home</a></dt>


<dd><a href="Link URL address I" title="Sub-Menu Title II">Sub-Menu Title I</a></dd>


<dd><a href="Link URL address I" title="Sub-Menu Title II">Sub-Menu Title I</a></dd>


<dd><a href="Link URL address I" title="Sub-Menu Title II">Sub-Menu Title I</a></dd>


<dd><a href="Link URL address I" title="Sub-Menu Title II">Sub-Menu Title I</a></dd>


<dd><a href="Link URL address I" title="Sub-Menu Title II">Sub-Menu Title I</a></dd>


<dd><a href="Link URL address I" title="Sub-Menu Title II">Sub-Menu Title I</a></dd>


<dd class="last"><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>


</dl>


<!--[if lte IE 6]></td></tr></table></a><![endif]-->






</li>


<li>


<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->


<dl class="three">


<dt><a href="Link URL address">LAYOUTS</a></dt>


<dd><a href="Link URL address" title="Sub-Menu IIIt">Sub-Menu III</a></dd>


<dd><a href="Link URL address" title="Sub-Menu III">Sub-Menu III</a></dd>


<dd><a href="Link URL address" title="Sub-Menu III">Sub-Menu III</a></dd>


<dd><a href="Link URL address" title="Sub-Menu III">Sub-Menu III</a></dd>


<dd class="last"><a href="Link URL address" title="Sub-Menu III">III</a></dd>


</dl>


<!--[if lte IE 6]></td></tr></table></a><![endif]-->


</li>


<li>


<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->


<dl class="four">


<dt><a href="Link URL address">MOZILLA</a></dt>


<dd><a href="Link URL address" title="Sub-Menu IV">Sub-Menu 1</a></dd>


<dd><a href="Link URL address" title="Sub-Menu IV">Sub-Menu 2</a></dd>


<dd><a href="Link URL address" title="Sub-Menu IV">Sub-Menu 3</a></dd>


<dd><a href="Link URL address" title=":Sub-Menu IV">Sub-Menu 4</a></dd>


<dd><a href="Link URL address" title="Sub-Menu IV">Sub-Menu 5</a></dd>


<dd><a href="Link URL address" title="Sub-Menu IV">Sub-Menu 6</a></dd>


<dd class="last"><a href="Link URL address" title="Sub-Menu IV">Sub-Menu 7</a></dd>


</dl>


<!--[if lte IE 6]></td></tr></table></a><![endif]-->






</li>


</ul><!-- end of drop down menu -->

10. Save the change
Now save the template by pressing the Save button and it's now done. Now you can see the result directly to your blog.

Troubleshooting: What if the Dropdown Menu i've already added to my blog doesn't have a good look on certain browsers?

After finished adding the dropdown menu into your blog, you might be baffled with why the dropdown menu you've added doesn't look good on other browser. Okay, this is the solution. By repeating the step from number 1 to 7 in the first method, the second method below will show you how to put the HTML codes for the dropdown menu when we still in the Edit HTML page, without having to enter the Page Element to Add a Gadget.

2nd method: Adding the Drop-Down Menu through the Edit HTML page

1. Remove the Dropdown Menu from the Page Element
In order to apply the second method, you only need to delete the HTML code you've already added (number 9 on the first method). Just go to Page Element and delete the existing widget you've just added with the dropdown menu code.

2. Go to Edit HTML
And then switch back the sub-tab to the Edit HTML again.

3. Find the code
By pressing the Ctrl + F again and find the code below

<div class='descriptionwrapper'> <p class='description'><span><data:description></data:description></span></p> </div>

4. Replace the code
Now block the whole codes on number 3 and then replace it with the code below:

<ul id="menu"><!-- drop down menu start -->


<li>


<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->


<dl class="one">


<!-- Alter the links with your own -->


<dt><a href="Link URL address I">Sub-Menu I</a></dt>


<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>


<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>


<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>


<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>


<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>


<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>


<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>


<dd><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>


<dd class="last"><a href="../menu/em_images.html" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>


</dl>


<!--[if lte IE 6]></td></tr></table></a><![endif]-->


</li>


<li>


<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->


<dl class="two">


<dt><a href="Home Link URL address I">Home</a></dt>


<dd><a href="Link URL address I" title="Sub-Menu Title II">Sub-Menu Title I</a></dd>


<dd><a href="Link URL address I" title="Sub-Menu Title II">Sub-Menu Title I</a></dd>


<dd><a href="Link URL address I" title="Sub-Menu Title II">Sub-Menu Title I</a></dd>


<dd><a href="Link URL address I" title="Sub-Menu Title II">Sub-Menu Title I</a></dd>


<dd><a href="Link URL address I" title="Sub-Menu Title II">Sub-Menu Title I</a></dd>


<dd><a href="Link URL address I" title="Sub-Menu Title II">Sub-Menu Title I</a></dd>


<dd class="last"><a href="Link URL address I" title="Sub-Menu Title I">Sub-Menu Title I</a></dd>


</dl>


<!--[if lte IE 6]></td></tr></table></a><![endif]-->






</li>


<li>


<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->


<dl class="three">


<dt><a href="Link URL address">LAYOUTS</a></dt>


<dd><a href="Link URL address" title="Sub-Menu IIIt">Sub-Menu III</a></dd>


<dd><a href="Link URL address" title="Sub-Menu III">Sub-Menu III</a></dd>


<dd><a href="Link URL address" title="Sub-Menu III">Sub-Menu III</a></dd>


<dd><a href="Link URL address" title="Sub-Menu III">Sub-Menu III</a></dd>


<dd class="last"><a href="Link URL address" title="Sub-Menu III">III</a></dd>


</dl>


<!--[if lte IE 6]></td></tr></table></a><![endif]-->


</li>


<li>


<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->


<dl class="four">


<dt><a href="Link URL address">MOZILLA</a></dt>


<dd><a href="Link URL address" title="Sub-Menu IV">Sub-Menu 1</a></dd>


<dd><a href="Link URL address" title="Sub-Menu IV">Sub-Menu 2</a></dd>


<dd><a href="Link URL address" title="Sub-Menu IV">Sub-Menu 3</a></dd>


<dd><a href="Link URL address" title=":Sub-Menu IV">Sub-Menu 4</a></dd>


<dd><a href="Link URL address" title="Sub-Menu IV">Sub-Menu 5</a></dd>


<dd><a href="Link URL address" title="Sub-Menu IV">Sub-Menu 6</a></dd>


<dd class="last"><a href="Link URL address" title="Sub-Menu IV">Sub-Menu 7</a></dd>


</dl>


<!--[if lte IE 6]></td></tr></table></a><![endif]-->






</li>


</ul><!-- end of drop down menu -->

5. Save the change
Save the template and now you can see the result.

Configuration of the Dropdown Menu

After finished adding this dropdown menu to your blog, now i want to show you how to customize the dropdown menu you've already added.

Inside the code on number 9 of the first method or number 4 of the second method, there are some specific codes i've already marked for you. Let's start with the code Link URL address and Sub-Menu I.

<dt><a href="Link URL address">Sub-Menu I</a></dt>
<dd><a href="Link URL address" title="Sub-Menu I">Sub-Menu I</a></dd>

As you can see in that code, the code Link URL address code must be changed with the URL address of your own blog or other websites. For example, try to change the code Link URL address with the code http://www.whatmakesblog.com.

And then for the code Sub-Menu I is the code of what title do you want to display on the dropdown menu. This Sub-Menu I code must be replaced with your preferred title. For example, try to change the code Sub-Menu I with the code "Blogger Team" or any title you really want.

How to differ the code for the Menu Title with the code of Sub-Menu Title?

Anyway, there is something i must tell you to finish this tutorial. You must also know how to differ the part for the Main Title and the part of the Sub-Menu Title. Menu Title is the anchor part from the dropdown menu, it's the part of the menu that will be shown without being pointed by mouse cursor. On the other side, The Sub-Menu Title is the part from the menu that will be shown when our mouse cursor is moved to the area of the menu. By doing so, the dropdown menu contains many links will be shown. Okay, now pay attention to this code:

<dt> </dt>

and also the code:

<dd> </dd>

If you can see those codes in the HTML code of dropdown menu, the code which begins with the tag codes <dt> <dt> indicates the main title or the main menu, not the sub-menu. And then for the tag code which begins with <dd> </dd> is the Sub-Menu title.

Okay, that's it for now. Hope you like this tutorial and consider to share it to Digg.com and other Social Media around the web. If you have something to ask to me, just type your question on the comment section below and i'll try my best to give you the best solution for your problem.


And if you liked this post, please consider sharing it. Thanks!

 Source:Internet