Create Blogger Dropdown Menu with this simple code

This post has supporting code that goes along with the tutorial on Adding Menus to Blogger. This course includes detailed instructions and a video that will walk you though exactly what to do with the code below.

Watch the video to learn what to do with this code >>

Step ONE:  Plan for your menu bar, creating a sitemap with all the links that you want to use.

Step TWO: Grab this code … replacing it with all your links … then add it into a new HTML widget where you want your menu bar to appear:

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

NOTE 1:  There is no styling added yet … so this will not look like much just yet.  But stay with me
NOTE 2: You are welcome to add more categories and sub-categories as you need. Just copy the same format as listed in the example.

Step THREE: Go into the Blogger Template Designer (click on CUSTOMIZE … then on ADVANCED … then on ADD CSS) and add the following:

/* ----- CSS Nav Menu Styling ----- */
#cssnav {margin: 0px 0 0 -30px;padding: 0px 0px 0px 0px;width: 1050px;  /* Set your width to fit yourblog */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;}