Adding Drop-down Menus to the Navigation Bar
Editing the sample code
Below is the sample code you'll need to add to the Advanced configuration field for the Navigation Bar. There are two sections of the code which need to be included. The first section of the code is the style which starts with the <style type="text/css"> tag and ends with the </style> tag. The second section of the code is where you will enter the tiles and URLs for the menus and starts with the <div id="centernav"> tag.
Editing the Style of the Navigation Bar
Editing the style code for the menus is not necessary, but you may need to make adjustments to match the theme of your blog. Not all classes with the style can be edited, and these classes are noted as "DO NOT EDIT" within the code.
For the classes which can be edited, there are notes included next to the class. For instance, you can include different color codes for the background when you hover over the links. We would recommend you start with the basic code provided on your blog, then make adjustments to the code as necessary to fit the style of your blog's theme.
Editing the Links included in the Navigation Bar
The sample code includes 4 tabs with 3 drop down menus. You can add more menus and links as needed. The # symbols need to be replaced with the URLs for the pages you are linking. For example, if you would like to place a link to your Categories in the second menu, you would start with sample code for "Menu Item 2":
<li id="main"> <a href="#">Menu Item 2</a> <ul id="subnav"> <li><a href="#">sub menu item 1</a></li> <li><a href="#">sub menu item 2</a></li> <li><a href="#">sub menu item 3</a></li> <li><a href="#">sub menu item 4</a></li> </ul> </li>
Then, you can edit the code to link to your categories similar to:
<li id="main"> <a href="http://everything.typepad.com/blog/archives.html">Categories</a> <ul id="subnav"> <li><a href="http://everything.typepad.com/blog/ads/">Ads</a></li> <li><a href="http://everything.typepad.com/blog/announcements/">Announcements</a></li> <li><a href="http://everything.typepad.com/blog/best-of-the-bloggers/">Best of the Bloggers</a></li> <li><a href="http://everything.typepad.com/blog/contest/">Contests</a></li> <li><a href="http://everything.typepad.com/blog/features/">Features</a></li> <li><a href="http://everything.typepad.com/blog/podcast/">Podcasts</a></li> <li><a href="http://everything.typepad.com/blog/tips_and_tricks/">Tips and Tricks</a></li> </ul> </li>