How to create drop-down menus in blogger

Most of blogger designers are trouble with creating drop-down menus in BlogSpot. In fact there are many ways how to create drop-down menus, this post will guide you how to do it. It’s easy and simple.



1. Step 1

Plan for your menu bar, then copy this code and replacing it with all your link....



<!-- start navmenu -->
<ul id='cssnav'>
<li class="active"><a href='http://bloggerhelp-kh.blogspot.com'>Home</a></li>
<li class="sub"><a href='http://bloggerhelp-kh.blogspot.com'>Category 1</a>
<ul>
<li><a href='http://SUB-CATEGORY-ONE-bloggerhelp-kh.blogspot.com'>SUB-category1</a></li>
<li><a href='http://SUB-CATEGORY-TWO-bloggerhelp-kh.blogspot.com'>SUB-category2</a></li>
<li><a href='http://SUB-CATEGORY-THREE-bloggerhelp-kh.blogspot.com'>SUB-category3</a></li>
</ul>
</li>
<li><a href='http://CATEGORY-TWO-bloggerhelp-kh.blogspot.com'>Category 2</a>
<ul>
<li><a href='http://SUB-CATEGORY-ONE-bloggerhelp-kh.blogspot.com'>SUB-category1</a></li>
<li><a href='http://SUB-CATEGORY-TWO-bloggerhelp-kh.blogspot.com'>SUB-category2</a></li>
<li><a href='http://SUB-CATEGORY-THREE-bloggerhelp-kh.blogspot.com'>SUB-category3</a></li>
</ul>
</li>
<li><a href='http://CATEGORY-THREE-bloggerhelp-kh.blogspot.com'>Category 3</a>
<ul>
<li><a href='http://SUB-CATEGORY-ONE-bloggerhelp-kh.blogspot.com'>SUB-category1</a></li>
<li><a href='http://SUB-CATEGORY-TWO-bloggerhelp-kh.blogspot.com'>SUB-category2</a></li>
<li><a href='http://SUB-CATEGORY-THREE-bloggerhelp-kh.blogspot.com'>SUB-category3</a></li>
</ul>
</li>
<li><a href='http://CATEGORY-FOUR-bloggerhelp-kh.blogspot.com'>Category 4</a>
<ul>
<li><a href='http://SUB-CATEGORY-ONE-bloggerhelp-kh.blogspot.com'>SUB-category1</a></li>
<li><a href='http://SUB-CATEGORY-TWO-bloggerhelp-kh.blogspot.com'>SUB-category2</a></li>
<li><a href='http://SUB-CATEGORY-THREE-bloggerhelp-kh.blogspot.com'>SUB-category3</a></li>
</ul>
</li>
</ul>
<!-- end navmenu -->


After copying the code and then login to Blogger Dashboard, go to layout....




add a Gadget choose HTML/Javascript and past all code above into HTML box and click save.

* Note: There are no styling added yet, your drop-down menu is not perfectly prepared.
But don't worry stay with me....!


2. Step 2

Now you are ready to add CSS style , go to blogger dashboard click on template and costomize then on Advance....... ADD CSS and past the following code.



/* ----- CSS Nav Menu Styling ----- */ #cssnav { margin: 0px 0 0 -30px; padding: 0px 0px 0px 0px; width: 1050px; /* Set your width to fit your blog */ font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */ color: $(tabs.text.color); /* Template Designer - Change Font Size */ } #cssnav ul { background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px; _background-image: none; /* Template Designer - Change Menu Background */ height: 20px; /* Change Height of Menu */ list-style: none; margin: 0px; padding: 0px; } #cssnav li { float: left; padding: 0px; } #cssnav li a { background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px; _background-image: none; /* Template Designer - Change Menu Background */ display: block; margin: 0px; font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */ text-decoration: none; } #cssnav > ul > li > a { color: $(tabs.text.color); /* Template Designer - Change Font Color */ } #cssnav ul ul a { color: $(tabs.text.color); /* Template Designer - Change Color */ } #cssnav li > a:hover, #cssnav ul li:hover { color: $(tabs.selected.text.color); /* Template Designer - Change Font Color on Hover */ background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */ text-decoration: none; } #cssnav li ul { background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px; _background-image: none; /* Template Designer - Change Menu Background */ display: none; height: auto; padding: 0px; margin: 0px; position: absolute; width: 200px; /* Change Width Of DropDown Menu */ z-index:9999; } #cssnav li:hover ul { display: block; } #cssnav li li { background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px; _background-image: none; /* Template Designer - Change Background */ display: block; float: none; margin: 0px; padding: 0px; width: 200px; /* Change Width Of DropDown Menu */ } #cssnav li:hover li a { background: $(tabs.selected.background.color); /* Template Designer - Change Background of Link on Hover */ } #cssnav li ul a { display: block; height: auto; margin: 0px; padding: 10px; text-align: left; } #cssnav li ul a:hover, #cssnav li ul li:hover > a { color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */ background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */ border: 0px; text-decoration: none;
*Note in this code I just add a few link, you can add more for your own blog
Now enjoyed with your drop-down menus.