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.

dropdown menu

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

CSS multi level dropdown menu

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.

150 comments to "Installing a multi level CSS dropdown menu"

Termite information October 6, 2009 at 1:04 PM    

first time here at this blog its very interesting and informative. I want to visit here very often. Thanks for such nice post.

Greenlava October 6, 2009 at 2:49 PM    

You're welcome Termite information.

Program Sukarelawan Teknologi (PROSTEC) October 9, 2009 at 1:49 PM    

i already put the code then, nothing happpens..
what are the next steps?

Greenlava October 9, 2009 at 3:08 PM    

Have you added the HTML part? I couldn't find it in your template code.

Program Sukarelawan Teknologi (PROSTEC) October 9, 2009 at 3:54 PM    

i already put it, but when i saved then i try to view it..
my font in my blog become bigger and my background color is changed to white..
why is it happen?

am i put the code in wrong section or what?

Greenlava October 11, 2009 at 12:39 AM    

Program Sukarelawan Teknologi (PROSTEC),
Did you not pasted the code in a HTML/Javascript gadget?

Program Sukarelawan Teknologi (PROSTEC) October 14, 2009 at 11:55 AM    

hey,greenlava..
i really need to make this..
can you help me..
i still can't figure it out..

can you tell me step by step,
what first should i do?

Program Sukarelawan Teknologi (PROSTEC) October 14, 2009 at 12:56 PM    

i finally make it..
thanx..

but,
can i move it below my header image?

Greenlava October 14, 2009 at 10:23 PM    

Program Sukarelawan Teknologi (PROSTEC),
I see you didn't add the menu as a widget/gadget.
Did you put the HTML code after b:includable id='main' in Header gadget?
To move it to below the header image, find these lines at the end of the Header gadget:
/b:includable
/b:widget

Cut and paste the menu code right before the lines.

Program Sukarelawan Teknologi (PROSTEC) October 15, 2009 at 6:13 AM    

Thanks for the tips man..
But think i want to leave it placed above my header image..
Great tips..

Hmm.. is it possible to put icon beside all the links in the navigation bar?
& can we remove the navigation bar,i mean only showing the fonts,without the bar?

Greenlava October 16, 2009 at 1:27 AM    

Program Sukarelawan Teknologi (PROSTEC),
To show text without the bar and add icon, just replace the background:ColorCode; with background:url(Your Icon URL) no-repeat; in CSS. You may need to add text-indent to make space for the icon.

Program Sukarelawan Teknologi (PROSTEC) October 16, 2009 at 6:08 AM    

thanx for the tips..
do you know how to make thumbnail or not-thumbnail photo gallery in blogger?
can you show how to do it?

Greenlava October 18, 2009 at 9:02 PM    

Program Sukarelawan Teknologi (PROSTEC),
For photo galleries, try CSS Play

Program Sukarelawan Teknologi (PROSTEC) October 20, 2009 at 10:46 PM    

i already make the photo galleries..
but the picture thumbnails too small..

can i make a link so that it can be opened in full size?
can you show me how to do it?

thanx..

Greenlava October 20, 2009 at 11:42 PM    

Program Sukarelawan Teknologi (PROSTEC),
Edit the gallery post in HTML mode.
You want to change the image code to clickable image. I'll show you an example. The code for the first image is (replace [] with <>):

[img src="http://i949.photobucket.com/albums/ad340/prostec/PICT0068-1.jpg" width="128" height="96" class="attachment-thumbnail" ]

You want to change it to:

[a href="http://i949.photobucket.com/albums/ad340/prostec/PICT0068-1.jpg"][img src="http://i949.photobucket.com/albums/ad340/prostec/PICT0068-1.jpg" width="128" height="96" class="attachment-thumbnail" ][/a]

Do the same to all photos.
Good luck

Program Sukarelawan Teknologi (PROSTEC) October 21, 2009 at 1:13 AM    

thanx..
works like a charm..
great..

how about putting contact form into blog?
where can i get it & how to do it?

Anonymous,  October 21, 2009 at 2:52 AM    

Hello, have you tried opening this on IE 6? Because I tried copying the codes and opened it in IE 6 and noticed that the information button is not opening properly..

Greenlava October 21, 2009 at 9:57 AM    

Anonymous,
The menu (in my test blog) looks okay in IE6. Try viewing the menu at css-play.blogspot.com. This blog is by the owner of the code. This tutorial uses the same code.

Greenlava October 21, 2009 at 10:02 AM    

Program Sukarelawan Teknologi (PROSTEC),
Try Response-O-Matic

Program Sukarelawan Teknologi (PROSTEC) October 21, 2009 at 1:25 PM    

thanx..

i want to put sound clip in my blog,can i do that?
but not the music player..

Greenlava October 25, 2009 at 7:16 PM    

Program Sukarelawan Teknologi (PROSTEC),
You can try using bgsound, but only IE supports this I think.
One more thing, most people find background sound annoying.

Unknown October 27, 2009 at 11:14 PM    

Hi how to put things like what you have below (ABOUT, RECIPROCAL, PRIVACY PLOICY)? I like it!

Greenlava October 30, 2009 at 2:49 AM    

ASIGNATURA,
You mean the footer? Read How to install a three-column Blog footer

Suhaiza Sa'at November 16, 2009 at 2:52 PM    

Hello Greenlava,

thanks God that i found ur site and the tips and I already put this coding to my blog. Seems great in horizontal but what is the way if I want its in the sidemenu (left or right). Can you teach me how? thanks again.

Greenlava November 16, 2009 at 9:43 PM    

Suhaiza,
Too much CSS tweaking is required to convert this menu into a vertical. I suggest you visit CSSPlay Menus, see what you like in there. You can get the code for the menus by viewing the page's source code.
But hey if you don't have a slightest idea what I'm talking about :), just bookmark what you like and email me.
Selamat mencuba

CindyD November 21, 2009 at 8:03 AM    

I am lost on this on. I just created the navagation tabs. Now I have to delete those to have a drop down menu? Sorry to be a pain!!

Greenlava November 21, 2009 at 3:04 PM    

CindyD,
Don't have to, they are indepedent of each other. But if you want to use just one, I don't see any reason to keep the other one.

CindyD November 22, 2009 at 12:44 AM    

I am trying to add this toolbar and after I edit the HTML and add the javascript, the toolbar loads right on top of my heading. It does not look like this should be happening in the layout. I cannot figure out how to correct this and lower it to be down under the heading. Thank you for any help.
www.losingweightoverfifty.com

Greenlava November 22, 2009 at 3:02 AM    

CindyD,
I detect a few problems.
1. There is an existing "menu" in your CSS that interferes with the new dropdown menu. You have to remove it. Go to Layout>Edit HTML and look for /* menu */. You have to delete codes starting from that line until the line before /* ---------- @ content Area -----------*/.
2. You need to add "height" to your header so it can push the dropdown menu down. Look for #theheader (not .theheader), and you should find this:
#theheader {
padding:10px;
}
replace the code with this:
#theheader {
padding:10px;
height: 70px;
}
3. To shorten and center the dropdown menu, look for #menu. Change the width to 600px and add in margin:0 auto; before the closing curly brace.

CindyD November 22, 2009 at 3:52 AM    

Thank you Greenlava,

I am so close, I think I did everything correctly, but I still cannot get it centered. You are really a great person to offer so much help. Could you take one more look at it please?

CindyD November 22, 2009 at 3:56 AM    

Hi GreenLava,

I should have put in one little space, as soon as I added that, it was perfect. I can't thank you enough for all of your help!! I have registered to your rssfeed and I will be anticipating any new content you post!! Thanks again, Cindy

Greenlava November 22, 2009 at 9:03 PM    

CindyD,
You're welcome. Glad you finally made it :)

OM November 23, 2009 at 2:08 AM    

GreenLava,

I'm also having difficulties. I already have a menu bar but I can't get it to drop down. When I add the one that you've provided, there's a white space between the two menus, and when I try to delete my old menu, the new one disappears. What am I doing wrong? Thank you in advance.

http://and-why-see.blogspot.com/

jezz December 6, 2009 at 10:17 PM    

this menu very good bro..thanks

commercial cleaning December 16, 2009 at 1:55 AM    

Where can I find a good example of a vertical, multi-level navigation, that is driven strictly by CSS?

commercial cleaning December 16, 2009 at 1:56 AM    

I want to be able quickly update my website by essentially cutting and pasting a multi-level bullet list from a word document to an html page.

Greenlava December 16, 2009 at 5:35 PM    

commercial cleaning,
For all sorts of CSS menus visit CSSPlay.
Pasting from Word document can potentially mess up your blog formatting. It's not advisable for you to do that.

4Mit December 31, 2009 at 11:25 PM    

Really nice post with the multi level drop down menu ...But I have a question ...I already have a menu provided by my template in my blog and I want to make it a multi level drop down menu , not to add a new menu above the posts ...Is there any way I can make the existing menu a multi level ? maybe from the html of my template ?
The blog is www.4mit.blogspot.com ...please help:) Thank you :)

Greenlava January 1, 2010 at 11:36 PM    

Trif,
I believe turning your existing menu into a multi level dropdown is a lot harder than adding a new one. Sorry I won't be able to assist you on that :(

Unknown February 3, 2010 at 11:24 AM    

Although, it took me several tries ...these are wonderful instructions and I love my blog with my drop down menu!!

But, I do need some additional help, if you have time and don't mind.

I have 2 Tips posted ...but they show up on any tab on which I click. What should I do when I enter the post, so that it appears only where it should?

Thanks so much for your assistance and great instructions!

Unknown February 5, 2010 at 10:25 AM    

Greenlava - Please check out my blog: http://msporch.blogspot.com

I'm extremely pleased with my drop down menu - although it took me several days to get it like it should be.

My problem is that whatever I post on one page -shows up on every page. How do I label the post so that the item (post) shows up on the correct page?

Also, the drop down menu only appears on the Main Page (Welcome Page). Is that correct - or have I missed something.

Again, appreciate your assistance, time, and wonderful instructions.

Many thanks!!

Sarah

Greenlava February 5, 2010 at 5:07 PM    

@Sarah
1. All posts show up because you use wrong label url. For example behind Memories & Ramblings tab the url is http://msporch.blogspot.com/search/labels/memories .There are two mistakes in that url, one the word "labels" should be "label", two you don't have a label "memories".
From what I can see, you only have four labels -about me, food-kitchen, pet peeves and tips.

2. I can see two problems (other than the above).
a. As you mentioned the menu only appears in homepage. Did you play around with this code -b:if cond='data:blog.pageType == ...'?
b. The menu tabs don't come out horizontal in Firefox.
I can't quite figure out why...maybe you accidentally deleted some codes when filling in those links?

Unknown March 15, 2010 at 11:57 AM    

Greenlava: Okay ....just about have it!! (Thanks to you, your time and most of all ... great instructions.)

Still can't figure out why my menu is only on my Welcome Page. (http://msporch.blogspot.com)

Can I email you the code?

If you can assist with this ....I promise to leave you alone!!

Thanks again, so very much.

Sarah

Greenlava March 16, 2010 at 3:12 PM    

@Sarah
You can send in the code.

suikaxusagi8 April 21, 2010 at 12:51 AM    

i'm using this one in my blog . I love it pretty much . thank so much . do visit mine and tell me about it . thank you again

Greenlava April 21, 2010 at 12:36 PM    

@Watermelon
It looks great, and your blog...kawaii :)

Unknown April 23, 2010 at 10:58 PM    

I noticed you have 5 below on your sample drop down, I need 5 as well, how can I do that? And thank you for all your tutorials and codes. If you look at my blog right now (acpictureplace.blogspot.com) you can tell it's struggling at the moment with me attempting to fill in the correct spots:(

Unknown April 24, 2010 at 2:00 AM    

Turns out I got it how I wanted it, so you can disregard the last question BUT now I only have a list rather than horizontal boxes...can you help me? The CSS code changes nothing when i put it in.

Greenlava April 24, 2010 at 4:05 PM    

@clauss house
Sorry for the late reply.
I see you've figured it out :)

Alicia May 24, 2010 at 4:42 PM    

I can't seem to change the position of the bar from left to right… I can't link you because I set my blog to private, but could you please help? Everything else works just fine.

Greenlava May 25, 2010 at 11:19 AM    

@Älici∂
Try changing text-align property in CSS code line 6 from text-align:left; to text-align:right;

Team Gharestra June 8, 2010 at 10:06 PM    
This comment has been removed by the author.
Julie June 11, 2010 at 11:42 AM    

Woohoo! I got it to work! Can you please help me center it? It's just a little off, favoring the left side of the header.

http://gettinhealthycheap.blogspot.com

Thank you!

Greenlava June 11, 2010 at 5:22 PM    

@Julie
Your menu is allright, it's the header that's slightly off to the right.
Go to Layout>Edit HTML and find this code:
#header {
margin: 5px;
border: 1px solid #cccccc;
text-align: center;
color:#666666;
}

replace it with this:
#header {
margin: 5px 0;
text-align: center;
color:#666666;
}

Preview before saving

Julie June 12, 2010 at 9:57 AM    

I noticed it was the header once I started adding more elements BUT I had no idea how to fix it. Thank you so much!!

IMAGINATION June 30, 2010 at 12:10 PM    

umm..im like 12 yrs old so could u...dumb this down a little more

Greenlava July 1, 2010 at 3:13 PM    

@IMAGINATION
I've revised the tutorial, check it out :)

chaez July 6, 2010 at 10:32 AM    

hi, i'm new to blogging.
i'm trying to make the dropdown menu
but it turns ot to be a very long list, it doesn't turn out a horizontal box. can you help me?

Greenlava July 10, 2010 at 8:58 AM    

@chaez
Have you added the CSS code in IV?

chaez July 12, 2010 at 2:39 PM    

ah, just added it aafter you told me.
it works!!! XD
thanks a bunch!! :))

TT July 13, 2010 at 11:08 PM    

does anyone know how to transfer this into mediawiki drop down

Greenlava July 14, 2010 at 1:58 AM    

@TT
I wish I could offer some help, but I know nothing about mediawiki :(

Anonymous,  September 2, 2010 at 10:15 PM    

i was wondering does the dropdown menu only apply in IE?
i followed your instructions but instead of a dropdown it shows all the levels even without hovering over it.

Greenlava September 3, 2010 at 12:59 PM    

@haeki
It should work on most browsers.
Make sure you add the codes in step I and IV correctly.

Anonymous,  September 4, 2010 at 12:34 AM    

@Greenlava
ah, yeah i'm trying it out now...but i've got 2 problems i hope you'd help me with >__<
in IE only one dropdown shows on each tab i add the dropdown. in Firefox there's no dropdown at all.
i was wondering which part of the codes creates the multiple dropdowns??

Greenlava September 4, 2010 at 4:16 AM    

@haeki
Try adding this before code line 5 in IV.1:
#menu ul, .tabs-outer {overflow:visible;}
#menu li a {border: none;}

Anonymous,  September 4, 2010 at 10:36 AM    

ummm...i'm such a noob at this, >____<
the links are now just once line, although all of them showed up now... and the level3 won't show up.

Greenlava September 4, 2010 at 4:43 PM    

@haeki
Make sure you close the li's ([/li]) at proper places.

Mike September 14, 2010 at 2:03 AM    

Just wanted to add to my previous comment.

It only happens in IE8. Firefox works fine. The dropdown bars are solid, and the links work fine in Firefox. But in IE8 the dropdown bars show up "behind" everything else, which causes the bars to disappear when scrolled over. It's like it thinks that you're mouse cursor is not on the dropdown bars, because the other items on the page get preference over the dropdown bars.

Greenlava September 14, 2010 at 8:53 AM    

@Mike
Aah IE bug in action, yet again.
Try adding this to the CSS code in IV.1:
.main-outer {z-index:10;}
.tabs-outer {z-index:11;}
I hope it solve your problem.

Mike September 14, 2010 at 9:59 AM    

WORKED LIKE A CHARM! THANK YOU SO MUCH!!!

Dar-us-Salam Publications September 16, 2010 at 8:54 PM    

Hi.

I tried doing this, but its a bit tough. My blog is http://dar-us-salam.blogspot.com/
I want to have Main menu items and the ones you are seeing on the blog to appear as sub menu's of the main menu.

please help out

Unknown September 17, 2010 at 2:15 AM    

I have to tell you how WONDERFUL This post is...you are so so helpful! Thanks a million!!!

Greenlava September 17, 2010 at 5:55 PM    

@Kelley
My pleasure. Doing my best to help :)

Greenlava September 17, 2010 at 6:42 PM    

@Dar-us-Salam Publications
Yeah I agree.
First you have to decide which item going to which level. Then it's just a matter of copy pasting the urls into the appropriate places in step I.5, with III as guide..
Do it very carefully.

engineerstandpoint.blogspot.com October 3, 2010 at 9:15 PM    

I have followed the procedures and installed CSS code but it seems it does not work and I saw that it does drop down.
please help me what is the problem? I want a drop down menu in my blog

http://www.engineerstandpoint.blogspot.com

Greenlava October 3, 2010 at 10:46 PM    

@AMalobago
Go back to the CSS code you added:

#NewContainer {
/*/* ================================================================
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:10px; background: #3aa3d3; height:25px;; text-align:center; position:relative; z-index:500;}

two corrections (in bold above) needed:
1. On top there, you have "#NewContainer {". This code does not belong here. Remove it.
2. #menu width -change it from 10px to 100%.

engineerstandpoint.blogspot.com October 6, 2010 at 4:31 PM    

Hi Greenlava:

Please help me to fix my navbar for drop down menu the width is shorter than blog title background or image and does not match. thank you for the above advise again.

Greenlava October 7, 2010 at 9:23 AM    

@AMalobago
1. First look at the end of your menu CSS, you'll see this:
#menu li a {border: none;} */
}
you want to replace that with this:
#menu li a {border: none;}

Then add this code:
.tabs-inner, .tabs-inner .section {margin:0; padding:0;}

2. The menu has it own background colors applied. To change, look for "background" or "background-color" in the CSS and remove/replace their values with what you want. You may also need to change the text color -look for "color".

Christoph October 13, 2010 at 2:18 AM    

Hello Greenlava...
I was excited to come upon your appearing simple solution to build a dropdown menu for blogger...

As with other code offered by others, this is also not working...GRRR

I have place your code into a gadget per requirement...Please visit http://christoph-theartofseeing.blogspot.com/ in order to see disaster...

Where am I going wrong...?
Thank you so much, in advance for your help...
Christoph

Greenlava October 13, 2010 at 2:55 AM    

@Christoph
See reply #59.

Christoph October 13, 2010 at 5:56 AM    

Thank you so much for your quick response...I just can't think straight ... what is IV?

Also, is my doctype wrong...?
I can't seem to understand what to change in the blogg HTML...I've trid them all.
Thank you so much...Christoph

Christoph October 13, 2010 at 6:30 AM    

Hello Greenlava...
My apologies for the last question...
Yes, the code in Section IV was added right above the ]]> line

Thank you...Christoph

filokalos October 15, 2010 at 4:28 AM    

Hi Greenlava,
I'm sorry to bother you, but I have a few problems with this code. I added it on a testing blog with Picture Window Template (from the new template designer), and the menu works properly only on firefox. On chrome I see the second level menu all in one line, and I don't see the third and fourth level. On IE 8 it's all messed-up. Can you help me? thank you

Greenlava October 16, 2010 at 10:59 PM    

@filokalos
I revised the CSS code. Hopefully it will fix the problem.
Please recopy the CSS code in step IV.
Tell me if it works.

filokalos October 19, 2010 at 2:40 PM    

yes, now it works! thank you so much!

Wenche November 13, 2010 at 4:28 AM    

Hi Greenlava,
thanks for posting this code for a dropdown menu. It's exactly what I have been looking for, but I have a couple of problems that I hope you can help me with.

I have copied the code to one of my testblogs, but the menu is appearing differently in IE8, Firefox and Chrome (haven't tried IE6 and 7). The menu is fine in IE8, but the menu won't go all the way under the header in Firefox and Chrome. Any suggestions?

Thank you so much, in advance for your help.
http://testfuchsia.blogspot.com/

Greenlava November 13, 2010 at 9:03 PM    

@Wenche
Replace CSS code line 11 with this:
#menu ul.level1 {margin:0 auto; width:100%;}

srvproblogger November 13, 2010 at 11:11 PM    

Dude Need Your Help ....
This drop down menu is working fine with all browser except
IE.Need to fix this issue.kindly see once the below link
http://www.find2web.blogspot.com/

Unknown November 20, 2010 at 6:41 PM    

I tried this Menu but it shows vertically without any effects. Pls help me step by step. I really want to put this on my blog.

Greenlava November 21, 2010 at 12:12 AM    

@Venu
Make sure you add the CSS code in step IV.

Christine Mann November 25, 2010 at 12:05 AM    

Hi! i love your site! My drop down menu is showing each level all on the page, there is no dropping-down. I did each step as you asked. I used a HTML widget and copied your HTML onto it. Can you help me? my blog: www.rollachurch.com
thanks :)

Greenlava November 25, 2010 at 5:51 PM    

@Christine Mann
Have you added the CSS code in step IV?

Christine Mann November 26, 2010 at 1:25 AM    

No, i hadnt done that! And now that i looked for ']]> line in your template' i cant seem to find it. I found <![CDATA[/* and so i pasted before that, but it SO didnt work! I ended up with the whole thing pasted above my header on my Blog. Am i using the wrong Template? Is there another one that will work better?

Christine Mann November 26, 2010 at 1:42 AM    

Ah!!! i found it!!! With some patience and determination :P
Thanks again, this is great :)

Unknown November 26, 2010 at 5:05 PM    

Thanks so much. Finally i figured out. Pasted step iv before <![CDATA[/* and it works. The only problem now is how to link labels with this menu. Anyway thanks again Greenlava :)

Greenlava November 26, 2010 at 10:05 PM    

@Venu
To link to a label, use label URL. For example, to link to "Engineering", use this URL:
http://welearnfree.blogspot.com/search/label/Engineering

Unknown November 26, 2010 at 10:12 PM    

Thanks I linked all the labels. I became a fan of this blog. Do have a look at my blog and let me know if I added all correctly.

Christine Mann November 27, 2010 at 1:08 AM    

ehy, this might be obvious to everyone else, but i've never worked with html before! If i dont want any background color, can i just delete those few lines, so that only the words are seen? like a transparent color or something? thanks so much for your help :)

Christine Mann November 27, 2010 at 2:15 AM    

ok, one more question :) How do i get the background color to always be there, instead of only on the top word. It's very hard to see the dropdown menu, with the other stuff on my Blog. Thanks :)

Greenlava November 27, 2010 at 5:11 PM    

@Christine Mann
Try replacing:
#menu ul.level2 {background:#000000;}
with this:
#menu ul.level2, #menu ul.level2 a {background:#000000;}

Christine Mann November 29, 2010 at 1:06 PM    

Greenlava, that's perfect! cant believe it was such an easy solution :) thanks!!!

Pranab December 4, 2010 at 3:30 AM    

i have installed the code as per the requirements. working fine in chrome and forefox, when tested in IE 9 the menu seems to b working fine but it is not up. I mean when the menu drops it remains under the next gadget unlike forefox/chrome. please check
my blog:
droppingdew.blogspot.com

Daily Freeware Download December 4, 2010 at 12:13 PM    

Greenlava, do you know how to create top horizontal menu like this site: http://news.yahoo.com/. Thanks in advance.

Pranab December 4, 2010 at 3:20 PM    

hello Greenlava,
I also checked the discussions regarding the I.E bug (ref comment no 69 and 70) and also checked that u have updated the code too. Still then i am getting the error. please help.

Thanking you

Greenlava December 4, 2010 at 10:13 PM    

@Pranab
Try adding this:
#HTML9 {z-index:11;}

Greenlava December 4, 2010 at 10:19 PM    

@Daily Freeware Download
That's just a regular horizontal menu you can create using a LinkList gadget or a HTML/Javascript gadget.

Pranab December 5, 2010 at 3:26 AM    

Hi !!
Thanks !! the menu is now dropping on the top of everything. but 4rd level is not flying out. rather on 3rd level itself it is appearing. please help !
am using ie 9
blog is droppingdew.blogspot.com

Daily Freeware Download December 5, 2010 at 7:41 AM    

Sorry my english is bad. I mean, I want to create a horizontal menu with the first row as a parent menu and the second as child menu. Please take a look at this screen shot: http://3.bp.blogspot.com/_pyxeq-8Qqxo/TPrPToq96TI/AAAAAAAABEk/Q5NePl-_3Mk/s1600/horizontal+dropdown+menu.png

Greenlava December 6, 2010 at 3:38 PM    

@Pranab
It's impossible to post codes here in the comments, so I posted the answer in Blogger Sentral Facebook page's discussion. Go there.

Pranab December 6, 2010 at 3:53 PM    

Hello Grenlava!

Thanks a lot!!
it is working fine now. By the way i have just checked the code...not found any alteration etc except the organisation of tags. was it the only reason for the fault?
Would be happy if u take the pain to answer...
Thanks again anyways !

Greenlava December 6, 2010 at 11:20 PM    

@Pranab
Yes that's right. I repositioned a closing a tag [/a].

Pranab December 8, 2010 at 3:09 AM    

hello Greenlava !!
am here again to give you some more pain. I know it is not the right place to write too coz the problem am saying is nothing to do with ur code (I guess so as perhaps it is happening after the addition of comment cloud code on top).
Problem is while in firefox and chrome the blog is all right, in IE the comment section is coming on the top of link within widget and all other stuffs.
Please help !
Thanks in advance !!
blog address: droppingdew.blogspot.com

Pranab December 8, 2010 at 3:01 PM    

Hello Greenlava !
This is regarding my last query about the I.E problem. I some how managed it by putting the HTML code with in nest line py pressing enter before the code. Actually the same thing was happening while I tried to put the "comment number" code from ur blog. but as I am not getting huge comments had discarded it.

well.. one more thing, why don't u start a thread regarding to put these kind of rounded rectangle in comment counter (as ur's). It is a appealing decoration to blog.
Anyways... Thank you. :-)

Pranab December 8, 2010 at 3:20 PM    

No it is still happening in one post named "the unsent letter" :-(

Greenlava December 8, 2010 at 9:09 PM    

@Pranab
It's strange that it's happening on just one post. It must be something inside that particular post that's causing the shift.

Pranab December 8, 2010 at 9:53 PM    

ok . :-(

I think that is manageable if it is in one post. I have another worry relating to the comment numbering code. posted it on that section. Please help !

Thanks anyways !!

Anonymous,  December 9, 2010 at 4:31 AM    

Hi, I've copied and saved the codes. However, those links that I've replaced are not working at all. The double quotation marks ("#url") change to single quotation marks ('#url')after I saved it. I'm not too sure if that's the cause of the problem. Can you help me with it? http://ahoylove.blogspot.com/

One more thing, my comment link and categories can't be seen at the post footer when viewed in IE8. It's working fine in FF and Chrome. Can you help me with this as well? Thanks in advance!

Happy Cottage Children Chinese Books and Resources December 10, 2010 at 11:32 AM    

Hi Greenlava,

Thanks to your guide for putting in the menu bar. I've got it up already. So now I want to add in the dropdowns, which part of the codes above should I start copying?

Greenlava December 11, 2010 at 5:06 AM    

@loveandinteresthings
You need to replace #url with the actual URL. For example if I were to put my Contact page in there, I need to replace "#url" with "http://www.bloggersentral.com/p/contact.html".
Double quotation being changed to single quotation -should't be a problem.

Greenlava December 11, 2010 at 7:20 AM    

@Happy Cottage
You are referring to the menu in Creating navigation or menu tabs in Blogger right?
You need to replace the code in the HTML/Javascript gadget with the code in step I. And then replace the CSS code you added (before /b:skin) with the code in step IV.

Anonymous,  December 11, 2010 at 9:30 PM    

Somehow I forgotten that the links in my widgets had to be replaced too. Got it fixed already!:D Anyway this blog is awesome, it has helped me a lot for my new blog! Thank you!:)

Happy Cottage Children Chinese Books and Resources December 12, 2010 at 12:17 AM    

Hi Greenlava,

I've successfully created the multi-level menu bar. Thanks. 2 questions:

1. How do I move the bar to the left to be align to the header?
2. For the level 2 menu, how do I change the length of the hover to be the same as the dropdown menu (column)?

Greenlava December 12, 2010 at 7:17 PM    

@Daily Freeware Download
Sorry for the late reply. You comment went into my spam box.
Try this one from CSSplay

Greenlava December 12, 2010 at 8:06 PM    

@Happy Cottage
To align the bar, change #menu width in step IV code line 5 to 100%, and add this code to your CSS :
.tabs-inner, .tabs-inner .section {margin:0; padding:0;}

Happy Cottage Children Chinese Books and Resources December 13, 2010 at 2:06 PM    

Thanks a lot. It looks good now.

Happy Cottage Children Chinese Books and Resources December 13, 2010 at 2:16 PM    

Sorry, forgot to add, how about the part about "For the level 2 menu, how do I change the length of the hover to be the same as the dropdown menu (column)? When I hover over the level 2 now, the highlight rectangle is shorter than the level 2 column.

Tamer Maverick December 18, 2010 at 1:23 PM    

thanks 4 this code

but i have a problem

look:http://maverickanotest.blogspot.com

sorry about my English:)

Greenlava December 18, 2010 at 8:49 PM    

@MaVeRiCkAnO
What's the problem? Looks fine from here.

Tamer Maverick December 19, 2010 at 1:39 AM    

thanks for your attention

look in this image

http://img814.imageshack.us/img814/5148/image7x.png

some menu appear out of my blog

this is not my basic blog 4 me ..i will test your code in it

thanks@Greenlava,

Greenlava December 19, 2010 at 11:24 AM    

@MaVeRiCkAnO
That's the defaullt (dummy) link texts. You want to read steps II and III to remove them or replace them with your own links.

Wolfy January 3, 2011 at 6:13 AM    

Great tutorial, but I'm having problems with getting the bar centered. I adjusted the #menu width to 100%, which is the only thing that has centered it, but I now have a bar that extends past where I want it to. Could you point me in the direction where I can adjust the length of the bar left and right?

TIA

Greenlava January 3, 2011 at 7:28 PM    

@Wolfy
But where is it?
Anyway, you can reduce the length of the bar by adding left and right padding to #menu.

Wolfy January 4, 2011 at 1:30 PM    

I had it positioned just below my header image. I've also moved it down to the footer, but it's still justifying left or extending past where I want it to.

I've tried monkeying with the padding, but it only seem to affect the spacing within the Tabs, not the part that extends past it.

This is the only thing that has changed anything, but it's still not moving it all in:

#menu li {padding-left:10px;padding-right:10px !important;}

I have the Width set at 100%, which has kept it centered. Here is my test page: http://testuf.blogspot.com/

Greenlava January 4, 2011 at 2:52 PM    

@Wolfy
Forget my previous reply. That was a bad advice (my brain abandoned me at that time lol)

This is what you have now:
#menu {width:100; background: #3aa3d3; height:25px;; text-align:center; position:relative; z-index:20;}

replace it with this:
#menu {width:800px; margin:0 auto; background: #3aa3d3; height:25px;; text-align:center; position:relative; z-index:20;}

Wolfy January 4, 2011 at 10:19 PM    

That seemed to have done it, except that I had to change the Height to 0px for the extended Shading to disappear. I guess now I can add the padding if I want to extend it further.

One more quick question, do you know what the dark outline at the top of part of bar could be? This dark line follows it in any position I move to.

Thank you for your help.

Greenlava January 5, 2011 at 12:21 AM    

@Wolfy
Replace code line 9 with this:
#menu li {clear:both;float:none;border:none;}

Wolfy January 5, 2011 at 1:41 PM    

That did it. You are awesome, thanks a bunch.

Wolfy January 6, 2011 at 11:01 AM    

So sorry, but I have one more small question. How do make Level 3 and so on, hover left instead of right? My level 3 info is little wide and there isn't enough space at the end of the page to show it all info.

Thanks Again!

Greenlava January 6, 2011 at 2:36 PM    

@Wolfy
Change the name of the class attribute of the li tag for "UF Info" tab from
level1-li
to
level1-li left

Remodelaholic January 12, 2011 at 10:17 AM    

Hey Greenlava, Love your site, thank you so much all your tutorials, they are the best on the web!

I have been working on adding the css list to my test blog

http://figuringoutblogger.blogspot.com/

and it looks perfect in Chrome, but in IE the far right hand list, is all listed out on the left hand side down my blog posts at all time... Is there a fix for this?

Also where can I change the size of the font on the bar, I am not sure why I can't find it, I must be blind.

Thanks for this tutorial!

CarolOates January 13, 2011 at 12:22 AM    

I created a test blog with the same template as my working blog. I added the css and html got the whole thing designed and working, when I copied and pasted to the working blog it didn't work, there is no css styling. What did I do wrong?

Greenlava January 13, 2011 at 2:07 PM    

@CarolOates
Have you copied the CSS code too? If you have, maybe there is a miss somewhere e.g. a missing/misplaced curly bracket.

Greenlava January 14, 2011 at 6:12 PM    

@Remodelaholic
Welcome back :)
Try replacing the HTML with this. (and don't get rid of your original code just yet, keep it somewhere)
As for the font size, you can change it in line 18.

Wolfy January 24, 2011 at 1:57 PM    

Thanks for all the help before. I think have it exactly the way I want it to appear in most browsers. Is there anyway to center it in IE as well? When I add code to move it also moves out of position in the other browsers, which I'm trying to avoid. TIA.

Greenlava January 26, 2011 at 1:45 AM    

@Wolfy
Try reducing the #menu width to match the actual bar width.
#menu {width:100%;.....}
change 100% to smaller figures until you get it right.

Wolfy January 26, 2011 at 5:22 AM    

Okay, so I checked the changes on a few different screens, and it seems that it's centered at 80% on a 10" screen in IE and still good with Chrome.

However, when I check it on a 19" & 23"wide screen monitor in IE and it's still shifted to the left. I can correct this by reducing the width to 54%, but that ends up shifting the look with the other browsers. Is there a possible work around?

Greenlava January 26, 2011 at 7:18 AM    

@Wolfy
Use a fixed unit, as in px. Hmm, try 770px.

Wolfy January 26, 2011 at 11:04 AM    

I'm going to call it good. It's centered on my 19" screen on IE and Chrome at 745px.

It's still extended past where I want it to be in IE, but at least it's centered now. Thanks for the help.

Remodelaholic January 27, 2011 at 5:58 AM    

Just wanted to say THANKS! I added that new code and it worked! Thank you! I need to get it all installed on my real blog now! Who know when I will get around to that!