Installing A Multi Level CSS Dropdown Menu

I’ve had a few requests from readers asking how to install a dropdown menu. So here it is, a multi level dropdown/flyout menu. The original code is from CSSPlay. I modified the CSS part a little to adapt to Blogger template. This four level dropdown/flyout menu should work in most browsers. A tab with small caps indicates it has upper level/levels. A dropdown/flyout will appear when you hover the tab.

A reminder though, CSSPlay support donation is required for the use of this menu and the copyright comment must be kept intact in the stylesheet.

I. Installing the menu

1. Login to your Blogger account.
2. Go to Layout (old interface: Design > Page Elements).
3. Click Add A Gadget.
4. In Add A Gadget window, select HTML/Javascript .
5. Copy the code below and paste it inside the content box. 

1. Click Save.
2. Drag to reposition the gadget below the header. 
   If the menu widget won't drop below the header, then you have to add a new widget container first. After that come back to reposition the widget.
3. Click Save and view your blog. You should see a functional menu installed.
4. Try hovering the tabs, make sure the dropdowns appear.

II. Renaming the tabs and adding the links

As you can see, the dropdown menu HTML is mainly consisted of unordered lists (ul) and list items (li).

• Unordered lists form the top level menu bar and dropdown columns. It starts with <ul> and ends with </ul>.
• List items form the top level tabs and tabs in each dropdown columns. It starts with <li> and ends with </li>.

Below is a code snippet for one of the tabs. 

<li><a href="#url">Telephone</a></li>

To rename the tab, simply replace Telephone with your own text. As for the link, just replace  #url with the tab’s intended URL.

III. Removing and/or adding tabs

You may delete or add submenus (up to 4 levels) and tabs. Make sure you add/remove the relevant code completely i.e. starting from the opening tag until the closing tag. Do the changes very carefully.

The menu bars and tabs are styled using CSS (Cascading Style Sheet). CSS applies the style to each bar or tab based on the class attribute that are added inside HTML elements. Different class name yields different styling/behaviour.

The class names used in this dropdown menu’s HTML are listed below. Please apply the appropriate class names when adding tabs.

Class name	To be added to
level1	Level 1 ul tag
level2	Level 2 ul tag
level3	Level 3 ul tag
level4	Level 4 ul tag
level1-li	Level 1 li tag with right or no dropdown
level1-li left	Level 1 li tag with left dropdown
level1-a	Level 1 li a tag for tabs with no dropdown
level1-a fly	Level 1 li a tag for tabs with dropdown
fly	li a tag for tabs (other than level 1) with flyout

IV. Styling the dropdown menu

1. Go to Template > Edit HTML > Proceed (old UI: Design > Edit HTML) and  and paste the following CSS code right before ]]></b:skin> line in your template. 
   
   1. Change the menu width in line 5 to match your header width.
   2. To change the background color of each level, simply replace the color hex code in lines 13 to 16.
   3. I use small caps font on tabs that have upper levels, to differentiate them from tabs that don’t. You can change that in line 35 and 36.

   Good luck and enjoy!