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.
   

   <!-- Dropdown menu Start -->
   <div id="menu">
   <ul class="level1">
   <li class="level1-li"><a class="level1-a" href="#url">Home</a></li>
   <li class="level1-li"><a class="level1-a fly" href="#url">Contact Us<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul class="level2">
   <li><a href="#url">Email</a></li>
   <li><a href="#url">Telephone</a></li>
   <li><a href="#url">Online Form</a></li>
   <li><a href="#url">Snail Mail Address</a></li>
   </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
   <li class="level1-li"><a class="level1-a fly" href="#url">Resort<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul class="level2">
   <li><a href="#url">Ski Hire Facilities</a></li>
   <li><a class="fly" href="#url">Main Ski Slopes<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul class="level3">
   <li><a href="#url">Beginners Slopes</a></li>
   <li><a href="#url">Intermediate Slopes</a></li>
   <li><a class="fly" href="#url">Advanced Skill Levels<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul class="level4">
   <li><a href="#url">Local</a></li>
   <li><a href="#url">Nearby</a></li>
   <li><a href="#url">With instructor</a></li>
   <li><a href="#url">Snow boarding</a></li>
   </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
   <li><a href="#url">Expert</a></li>
   </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
   <li><a href="#url">Night Life</a></li>
   <li><a class="fly" href="#url">Restaurants<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul class="level3">
   <li><a href="#url">Snow Hotel</a></li>
   <li><a href="#url">The Snowman</a></li>
   <li><a href="#url">Ice Cavern</a></li>
   <li><a href="#url">Ski Inn</a></li>
   </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
   <li><a class="fly" href="#url">Car Hire<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul class="level3">
   <li><a href="#url">From Airport</a></li>
   <li><a href="#url">In Resort</a></li>
   <li><a href="#url">Multiple Resorts</a></li>
   </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
   </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
   <li class="level1-li"><a class="level1-a fly" href="#url">Surrounding Area<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul class="level2">
   <li><a href="#url">Where to go</a></li>
   <li><a href="#url">What to do</a></li>
   <li><a href="#url">Places of interest</a></li>
   <li><a href="#url">National parks &amp; Museums</a></li>
   </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
   <li class="level1-li left"><a class="level1-a fly" href="#url">Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul class="level2">
   <li><a href="#url">Money Exchange</a></li>
   <li><a class="fly" href="#url">Resort Essential Information<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul class="level3">
   <li><a href="#url">Lift Passes</a></li>
   <li><a href="#url">Insurance</a></li>
   <li><a class="fly" href="#url">Gear Rental<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul class="level4">
   <li><a href="#url">Boots</a></li>
   <li><a href="#url">Skis</a></li>
   <li><a href="#url">Ski Wear</a></li>
   <li><a href="#url">Goggles</a></li>
   </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
   <li><a href="#url">Ski Schools</a></li>
   <li><a href="#url">Snow Report</a></li>
   </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
   <li><a class="fly" href="#url">Language<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
   <ul class="level3">
   <li><a href="#url">Austrian</a></li>
   <li><a href="#url">German</a></li>
   <li><a href="#url">French</a></li>
   <li><a href="#url">English</a></li>
   </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
   <li><a href="#url">Short Breaks</a></li>
   </ul>
   <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
   <li class="level1-li"><a class="level1-a" href="#url">Privacy</a></li>
   </ul>
   </div>
   <!-- BloggerSentral.com -->
   <!-- Dropdown menu End -->

6. Click Save.
7. 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.
8. Click Save and view your blog. You should see a functional menu installed.
9. 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.
   

   /* ================================================================ 
   This copyright notice must be kept untouched in the stylesheet at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/anywidth2.html
   Copyright (c) 2005-2009 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements.
   =================================================================== */
   #menu {width:740px; background: #3aa3d3; height:25px;; text-align:center; position:relative; z-index:20;}
   #menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;}
   #menu ul {display:inline-block;}
   #menu li {margin:0; padding:0; list-style:none;}
   #menu li {clear:both;float:none;}
   #menu ul ul {position:absolute; left:-9999px;}
   #menu ul.level1 {margin:0 auto;}
   #menu ul.level1 li.level1-li {float:left; display:block; position:relative;clear:none;}
   #menu ul.level1 {background:#3aa3d3;}
   #menu ul.level2 {background:#ae4621;}
   #menu ul.level3 {background:#c98b14;}
   #menu ul.level4 {background:#9f690e;}
   #menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows why --*/
   #menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#fff; line-height:25px; text-decoration:none;padding:0 15px 0 15px;outline:none;}
   #menu ul.level1 li.level1-li a.level1-a {float:left;}
   #menu ul li:hover > ul {visibility:visible; left:0; top:25px;}
   #menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-25px;}
   #menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;}
   #menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; margin-top:-25px;}
   #menu a:hover ul {left:0; top:23px;}
   #menu li.left a:hover ul {left:auto; right:-1px; top:23px;}
   #menu li.left ul a {text-align:right; padding:0 15px 0 15px;}
   #menu a:hover a:hover ul,
   #menu a:hover a:hover a:hover ul {left:100%; visibility:visible;}
   #menu li.left a:hover a:hover ul,
   #menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;}
   #menu a:hover ul ul,
   #menu a:hover a:hover ul ul {left:-9999px;}
   #menu li.left a:hover ul ul,
   #menu li.left a:hover a:hover ul ul {left:-9999px;}
   #menu li a.fly {font-variant: small-caps;}
   #menu li.left ul a.fly {font-variant: small-caps;}
   #menu li a:hover,
   #menu li a.fly:hover {background-color:#555555;}
   #menu li:hover > a,
   #menu ul li:hover > a.fly {background-color:#555555;}
   #menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; margin-top:-4px;}
   #menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
   #menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; border-collapse:collapse; margin-top:-4px;}
   #menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; border-collapse:collapse; margin-top:-29px;}
   #menu ul, .tabs-outer {overflow:visible;}
   #menu li a {border: none;}
   .main-outer {z-index:10;}/*for IE*/
   .tabs-outer {z-index:11;}/*for IE*/ 

2. Change the menu width in line 5 to match your header width.
3. To change the background color of each level, simply replace the color hex code in lines 13 to 16.
4. 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!

 

Update July 2010: Change document structure and improve explanation.
Update Sept 2010: Add CSS code line 45 and 46 to remove hidden dropdown and border bugs in Template Designer templates.
Update Oct 2010: Revise CSS  to address Designer template and cross browser compatibility issues.