A Simple Drop-Down Menu Using Jquery

The last two drop down menu tutorials on this blog use background images in the menu-tabs, and hence it is not so easy to customize them for your blogs. So here’s a new widget code, in which you can easily change the colors of the menu so as to match with your blog.

Live demo can be seen here:
Demo1: ClubVista Blogger Template (In Green)
Demo2: JavaScript-Array (In Blue) (Widget author’s blog)

To add a widget similar to these, follow these steps:

Log in to Blogger, go to “Layout” -> “Edit HTML

Now find this code:


and immediately BEFORE/ABOVE it, paste this code:

<style type=”text/css”>
/* menu styles */
{ margin: 0;
padding: 0}

#jsddm li
{ float: left;
list-style: none;
font: 12px Tahoma, Arial}

#jsddm li a
{ display: block;
background: #324143; /*DARK-GREEN*/
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap}

#jsddm li a:hover
{ background: #24313C}

#jsddm li ul
{ margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white}

#jsddm li ul li
{ float: none;
display: inline}

#jsddm li ul li a
{ width: auto;
background: #A9C251; /*LIGHT-GREEN*/
color: #24313C}

#jsddm li ul li a:hover
{ background: #8EA344}

<!– script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js” type=”text/javascript”></script –>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{ jsddm_canceltimer();
ddmenuitem = $(this).find(‘ul’).eq(0).css(‘visibility’, ‘visible’);}

function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css(‘visibility’, ‘hidden’);}

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}

{ $(‘#jsddm > li’).bind(‘mouseover’, jsddm_open);
$(‘#jsddm > li’).bind(‘mouseout’, jsddm_timer);});

document.onclick = jsddm_close;

Now before you save the template, make these changes in the code :

To get the HTML color codes, you can refer to this image:
and go to “Layout” -> “Page Elements
and click on “Add a Gadget“, select it as “HTML/JavaScript” type

and finally paste this code in to the new widget:

<ul id=”jsddm”>
<li><a href=”#”>JavaScript</a>
<li><a href=”#”>Drop Down Menu</a></li>
<li><a href=”#”>jQuery Plugin</a></li>
<li><a href=”#”>Ajax Navigation</a></li>
<li><a href=”#”>Effect</a>
<li><a href=”#”>Slide Effect</a></li>
<li><a href=”#”>Fade Effect</a></li>
<li><a href=”#”>Opacity Mode</a></li>
<li><a href=”#”>Drop Shadow</a></li>
<li><a href=”#”>Semitransparent</a></li>
<li><a href=”#”>Navigation</a></li>
<li><a href=”#”>HTML/CSS</a></li>
<li><a href=”https://bloggerstop.net”>Blogger Help</a></li>

And save the widget.

255 thoughts on “A Simple Drop-Down Menu Using Jquery

  1. Hi DA,
    your test blog is not open to public, anyways i think there might be some code conflict with your template, same with CrakerLo’s blog…..

    why don’t you try it in your other blogs ?

    @ CrakerLo, and DA,
    Well i can suggest you two to use other drop-down menus described in this blog…


  2. @ Ambara and Everybody,

    There was a small error in the code, and hence it wasn’t working for you people, I have just corrected it, please try it and tell me if it works for you now!

  3. The error is in the last style:

    #jsddm li ul li a:hover
    { background: #8EA344

    you have tu complete with a bracket like this }

    so the correct code will be:

    #jsddm li ul li a:hover
    { background: #8EA344 }


  4. hi i have tried the codes.it worked but got a problem that is it hides behind the main header picture, if i change its position it still hides behind the post area. please help me out.

  5. Yes Salman, I have visited your blog, I'm not sure but I think it's a css clash. It's actually a common problem…

    Why don't you try the other widget in your blog, i think it will too suite your blog !

  6. Hi!
    Thank you for your excellent step by step guide on the drop down menu. I successfully configured my blogspot to include the drop down menu, BUT now how do I post contents so that it corresponds with the drop down menu?

  7. hey thanks for this btw

    ok but i got a few problems ok
    1)is the drop down menu supposed to be at the bottom of my page? how can i get it so it appears at the top?

    2)i added new titles to the menu but how do i get it to actually lead to somewhere. e.g
    *ART* –> *drawings*photographs*???*
    how do i get it to lead to my pictures or watver?


  8. Works awesome except I can figure out how to keep the drop-down from going behind my other elements. Tried to search for a solution but keep hitting dead ends. Anyone have a work-a-round? Thanks. ~x(

  9. Hmmm….If you haven't yet tried it on your main blog, then I would suggest you to try it out there too.
    As the problem you are facing, may/may not appear in every blog…so jst check it in your main blog too.

  10. (1). left float is already present in the code..i think there's some other code problem:
    #jsddm li
    { float: left;
    list-style: none;
    font: 12px Tahoma, Arial}

    (2). Chk out this screenshot, notice the three highlighted widgets, that is the location, where you have to drag the new widget and not IMMEDIATELY below the Header !



  11. Hello Angelina,

    I am really happy for you, feel free to show-off your work, if you have used any tutorial from BloggerStop
    In fact if time permits, I was myself planning to update my blog-posts with links to work done by the readers as examples ๐Ÿ™‚

  12. Wow that would be a nice idea and really encouraging for the readers too.Can i ask a question? this is working absolutely perfect in my firefox 3.5 but when i open it in my internet explorer the drop down menu box appears like well below its heading like there is a big gap between the menu name and drop down box but only in internet explorer.By the way i have very old internet explorer i.e 6.0 may be that would be the reason?

  13. The dropdown part still hides under my elements. I ended up moving my elements out of the way so the menu bar is functional on most of my pages. I don't know how to add a screen shot here, but on this link, under "contact" you can see it hiding behind my google ad. If anyone ever finds a solution let us know.

    My page: http://onlyfreestuffheresamples.blogspot.com/

    And this probably works, just I don't know code so have no clue where to place it or even if this is the fix?


  14. Hi Angelina…welcome back

    May be as you mentioned the problem is specific to IE6, as in my IE8 your blog looks really good.
    Here's the screenshot:

    In my blog, I hardly have around 3-5% visitors with IE6, so if you too have similar stats, then do not worry much for that small gap ๐Ÿ™‚

  15. @ Only Free Stuff Here

    I can understand your problem, but although I do not have any quick-fix for it presently, what I can suggest you is to swap the links "Games" and "Contact" in your menu, as "games" does not have any sub-menus, but "contact" does have, which are hidden behind your adsense-ads.

  16. Thanks, not much traffic at my site yet. I am just trying to fix this menubar b4 then. I really like the menubar and I am sure there will be a fix soon. How did you send me a screenshot from here? Thanks

  17. @ Divya Sai Hey i have a question i hope you will try to help again.Is there any possibility to have multi level drop down menu with this code? I know you have provided it in your previous page but the thing is that they are not very easy to customise.So, I am just curious to know if you can help me out in this matter and provide any edit or something to have multi level drop down.I only need 2 levels something like "Title> (down) sub category>(right) sub category 1, 2 etc"

    Thank You once again

  18. hi! i really like your drop down menu! i've been searching for it for some time!

    however, the drop down menu part seems to be hidden behind my blog contents! and i can't make it in the centre!

    i've also tried the multi level drop down menu, but the drop down part is also hidden behind my blog contents!

    pls help me on my test blog! ๐Ÿ™‚ THANKS!


  19. Sobriquetz: Here is the template I use. It should work for you as well. Do a Google search for "Our Blog Templates". The link should come up (1st on my results). On his page (top right) use his "custom search" bar and type in: "The Professional Template". On mine it is the 3rd link down. It will take you direct to the template I use and the download.

  20. @ Angeline Watson,

    You can try this widget:

    Before uploading the .CSS file, you can easily change the color of the widget in that file by changing this code in the file:

    font: bold 12px Verdana;
    background: #414141;
    width: 100%;

    @ sobriquetz
    Plz try this widget in your main blog, and then tell me if you are still facing the problem…

    @ Only Free Stuff Here
    If you know the link, then why don't you give it here….why so many searches?

  21. i decided to upgrade my test blog into the layout template, and the drop down menu works!

    but i can't put it in the center even when i use
    the center html

    how else can i align it in the center?

  22. yay! i've got it!
    dragged it above the blog post and it is now in the center! now i can continue editing it before transferring to my main blog!

    thanks everyone for your help! ๐Ÿ™‚

  23. @ Divya Sai Please listen to me i really need your help in the other menu you suggested me i am not able to customise it well.there are few question. When i try to change the background as u suggested it only changes the color of a little block on the end of the menu but somehow i was able to change the background colour of whole menu.But like this menu i want the colour of sub menu to be different.But i am not able to do that.The background colour of title and sub menu remains same..can you help me/? thanks

  24. Well Angelina, in the .css file (of the post you are referring to), you'll see some hexa-decimal codes for different colors, with comments, like these:

    /*background of tabs (default state)*/
    /*tab link background during hover state*/
    /* Sub level menu links style */

    /*sub menus hover style*/

    Now wherever these comments are there, change the hex-codes, according to your requirements.

    Hope this helps you…

  25. Hi Divya,

    Thanks for such a good tutorial

    I have a problem. The menu items are displayed below the blog elements instead in front of them. I mean the drop down list goes behind the text. Can you tell me how to bring all the elements in front of the text


    Rachit Oza

  26. @ Divya Sai Thank you that helped alot but sorry for asking again but i didnt find any hexa colour codes next to or near "/* Sub level menu links style */" i want to change the background colour of sub level menu but didnt find any place to place the code..can you explain please? thanks again.
    "/* Sub level menu links style */
    .jqueryslidemenu ul li ul li a{
    font: normal 13px Verdana;
    width: 160px; /*width of sub menus*/
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;

    C there is no place for hexa colours?

  27. In the same code, add a line for the background color, like this:

    /* Sub level menu links style */
    .jqueryslidemenu ul li ul li a{
    font: normal 13px Verdana;
    width: 160px; /*width of sub menus*/
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
    background: blue;

    That's it !

  28. Hey in the end i got that part thanks alot…only last 2 questions lol hope you arent getting irritated.1) is there any way to change the colour of text of sub menus?
    2) I want the width of the columns to be same how can i do that?I want to make all columns of equal size of the width FOLDER 1 and 2 Thanks.

  29. To change the text color, add one more line to the code above like this:

    color: red;

    And to make the menu of equal width, make the smaller menu tabs wider by typing the invisibe character(as width is adjusted acc. to the number of letters in the menu)…NOT spacebar but this:


    type '3' and '2' from the num-pad (first hit 3 then 2, while keeping the ALT button pressed).

    And feel free to ask many doubts as you want, but sometimes I just get too busy to answer them quickly

  30. Thank you so much once again by the way where to place > color: black; < code? i tried to put it like this for submenu links colour > "/* Sub level menu links style */
    .jqueryslidemenu ul li ul li a{
    color: black;
    font: normal 13px Verdana;
    width: 160px; /*width of sub menus*/
    padding: 5px;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid gray;
    }" and it didnt work its alrite i cant wait forever to get your helpful replies ๐Ÿ™‚

  31. Plus for the width i am sorry but i did get the part how to make space by those keys but i do not know where to do that? i tried to put space (by your procedure) before ITEM 2 in the html code section

  32. Hi Maggie. Sorry I was unable to figure that one out. Each time I left "Making Sense Of The Dollar" to browse down to "Preorder", the "Making Sense Of The Dollar" would default back to the lighter gray (or main menu color). I am sure there is a way to make the darker gray hover remain permanent while browsing on down the list but I have no clue how to do this. You might have some luck here: http://groups.google.com/group/blogger-help?pli=1

    They helped me in the past.

  33. I'm sorry to bug you. I know you get lots of questions, but I am really lost here and don't know what to do. I have added your drop down menu and one of your simple tab menus onto a blog I have, and when you click on my blog they don't work. If you refresh my blog page, then they show up correctly and work. Would you mind taking a look and letting me know if you have any advice on how to get these to work right when someone goes to my blog?
    Hopefully that made sense!
    Thanks so much! Your tutorials are great!!

  34. Hi Julie,

    I have just checked your blog, and found the drop-down menu perfectly working…even before refreshing the page (in the initial page-load itself)…don't worry simply try the widgets in your actual blog too, you can of course delete the code anytime you want ๐Ÿ™‚

  35. I am having a hard time in getting this to stretch across my blog also I am having a hard time getting my list to drop down correctly…. Here is the code I am entering in the widget. Could you tell me what I am doing wrong? For the tim being, I have removed the widget in my blog.

  36. <!–BODY-CODE–>
    <ul id="jsddm">
    <li>Coupons 101</li>
    <li>Newspaper Coupons</li>
    <li>Internet Coupons</li>
    <li>Additional Resources</li>
    <li>Organizing Coupons</li>
    <li>Expired Coupons</li>
    <li>Drugstores 101</li>
    <li>CVS 101</li>
    <li>Walgreens 101</li>
    <li>Store Coupon Policy</li>
    <li>Rite Aid</li>

  37. The drop down menu works great. (Thanks!) But the drop down tab menu on the right doesn't. Every time the page is refreshed it doesn't work. Any ideas??!??!?!

  38. The code is fine, nothing to change in it…
    But the widget you have added should be dragged below the "Header" and not immediately above "Posts Body" widget in the "Layout" page. Anyways I have just checked your blog, and I think you have already done it…in case you still have a problem then feel free to comment here ๐Ÿ™‚

  39. great stuff, works well … two questions …

    1. how do i add another box to the main menu, i need six options?

    2. is it possible to make this work in individual posts (using blogger)?

  40. 1. In step 3, you have to add some more code, like this :
    Immediately after the HTML/CSS line, add this code:

    <li><a href="#">New Menu</a></li>

    And if you want a drop down in this one, then before closing the <li> tag, you have to add a <ul> tag inside it, just as done for the EFFECT option:

    <li><a href="#">Effect</a>


    2. To show the widget only in specific pages, use this method:

    Gud day!

  41. OK, I have a stupid question! How do you link to a site outside of your blog? When I put an address like http://www.cnn.com (just an example) it will put that address after my blogpot address and says the page can't be found.

    So how do you link to outside or external webpages? What am I missing???

    Thanks for all of this info, everything else works great!


  42. I had this working alright and then I tried to add an archive drop down menu. It didn't work so I tried to fix and now the drop downs will not work at all. I even started from scratch and it is not working. benandlaura.blogpspot.com

  43. Hi….this is a beautiful code!! It's working perfectly on my blog….but I'm having the same issue as Shawn (WBYDA) with the dropdown tabs on the menu looking "transparent" when you click on them. When you are on a dropdown link….you can see the words from the blog behind it. Any way to take that transparency out? I'm using a solid background image, so it shouldn't be "see-through." Thanks!!


  44. @Tree

    Just visited your blog, you are perfectly using images as background-image for your menu items. I didn't notice the transparent effect in your menu, so is it solved or are you still fcing that problem?

  45. Nope….it's still there. But, it seems that it only happens on the nav links that are above the center column posts. It's very strange too….it only does it on the topics that don't have a "sticky post" at the top. LOL Maybe I'll just add a sticky post to all the topics and that will solve the problem.

    Example: If you go to Kid Korner, then What's in for Kids….then mouseover the nav bar and you'll see that the nav link background fades out.

    Otherwise I love this code!!


  46. okay,

    If that error is still there, then try this…
    In this code:

    { width: auto;
    background: #A9C251; /*LIGHT-GREEN*/
    color: #24313C}

    add these additional lines of code:

    { width: auto;
    background: #A9C251; /*LIGHT-GREEN*/
    color: #24313C
    opacity: 1.0;
    -moz-opacity: 1.0;
    filter: alpha(opacity=100);
    z-index: 102;

  47. No….didn't work. But, I still love the code, so I can deal with that. If it can't be fixed, I'll just add a sticky post to each page so it doesn't do it. LOL ๐Ÿ˜€

    Thanks for your help!!

  48. Thank you so much for this! I have been trying to get this feature on my blog for a week and finally came across your post. I'm going definately going to past this on.

  49. solution for the drop down menu is hidden by other tags or the menu looking "transparent". At least work for me.
    I used jqueryslidemenu without problem previously. I run into this problem when I created a new page. After some debugging, I figured out that it is the "position:relative;" attribute caused the problem. After I removed all the "position:relative;" from the tags on the css file. The problem solved. I don't know why this attribute causes this problem though. Hope it helps.

  50. Thank u soo much for the post!! I have a question though

    1) how can u change the number of tabs that have the drop down feature? (in this code u can only have 2 of the tabs in the nav bar with drop down feature)

    2) How can add more tabs to the menu?

    Thank u again for the post!

  51. @BloggerGirl
    In between any two <li> …. </li>

    Add a


    then between this ul and /ul you can again add some li…/li to create new drop-down menus.

    If you are facing any problem, tell me the menu items, I will make the code for you.

    @Earn in PTC
    You are most welcome buddy ๐Ÿ™‚

  52. Hi Kelly,

    I'm glad that the guide helped you.
    Here's what you have to edit, to change the text-color:

    #jsddm li a
    { display: block;
    background: #324143; /*DARK-GREEN*/
    padding: 5px 12px;
    text-decoration: none;
    border-right: 1px solid white;
    width: 70px;
    color: #EAFFED;
    white-space: nowrap}

    #jsddm li ul li a
    { width: auto;
    background: #A9C251; /*LIGHT-GREEN*/
    color: #24313C}

    Edit the bloded code. Change "#EAFFED" and "#24313C" to some other HTML hex-codes [See this color-guide]

  53. Hey there!
    I actually did change those texts. What I was referring to was the color of the text in the nav bar itself.
    It seems the only customizable text was that of the words that dropped down. Unless I missed something??

  54. Hey Kelly,

    In my previous comment, there are two lines with the word "color"

    The first one is:
    color: #EAFFED;
    change this to change the text-color in the main nav-bar.

    and the second one is:
    color: #24313C;
    edit this to change the text-color of drop-down menu links.

  55. Hey John,

    The links you have given aren't in detail. There's no demo, no instructions…
    Plz try these widgets, they are customizable, hope you'll find what you want:
    1. Multi-Level menu (To change color, change the code in the CSS file).

    2. To change the colors, you have to again edit the CSS file, but in this widget the menu ites backgrounds are images (gray colored).

    3. And of course you may use the widget shown in this page. (you can easily change the colors by editing the code in STEP #2)

  56. Tell me the widget you liked (if that's widget 1/3 from my previous comment), I'll make the changes in the code for you.
    Also, select and tell me the color-codes you want to use in the widget from this page (for menu background color and mouse-hover color).

  57. You are most welcome Halye…and thank you for the post, I really appreciate that. Feel free to comment anywhere in the blog in case of doubts. Happy Blogging ๐Ÿ™‚

  58. hi ๐Ÿ™‚ I've try this codes and it when great but my problem is only this, when i approach to the drop-down-menu and click of one of the drop-down it will dissapear… I wanted it to be stable until it access to the page ^_^ can you help me please :D…
    Like for example: when i go to "MY PERSONAL NOTES" and drop-down appears then I click "MY FAVORITE VIDEOS" it suddenly fade.. ๐Ÿ™‚

    Please Help me keep it sustain until it reach the link-page I click ๐Ÿ˜€ thank you
    and here's my blog


  59. @Vice T. Vanish

    I understand your point, but that's not exactly a problem…whenever we go to a new page eveything in the previous page closes and the new html loads.

  60. Like other drop-down-menu when I click of them with out inserting a code target="_blank"..

    Like for example when I go to the "???" in the menu the drop-down-menu a drop-down of "home pag default example" all appears. When I click one of them it will stay at it ease until it reach to its respective loaded and dissapears only when it reaches the loaded respectively…

    Try example in my Dummy blogsite: http://vicevanish.blogspot.com

    The drop-down-menu of this dummy-blogsite is different codes I've try and experiment in other resources..

  61. Thanks so much for this code. I'm new to blogging, html, etc. and really wanted drop down menus.

    A couple questions:

    How do I center each Menu Button Text within the blue button? for example: Categories

    I've figured out how to make some of the buttons "work" by adding an url. How do I go about creating an "About Us" page or a Contact Us page so I can add that url, too?

  62. 1. To center the text, add text-align:center to these code snippets, like this (in BOLD):

    #jsddm li a
    { display: block;
    background: #324143; /*DARK-GREEN*/
    padding: 5px 12px;
    text-decoration: none;
    border-right: 1px solid white;
    width: 70px;
    color: #EAFFED;
    white-space: nowrap}

    #jsddm li ul li a
    { width: auto;
    background: #A9C251; /*LIGHT-GREEN*/
    color: #24313C}

    2. Create About and Contact Us page, using the latest feature on Blogger – Blogger Static Pages

    Also, rea on how to add a "contact Us" form in Blogger blogs:

  63. This question isn't directly related to this post, but I didn't know where else to ask.

    Now that I've added your amazing drop down menu, I would also like to have a background like the one here on this post page. It doesn't need to have the pattern yours does, but I'd like to add a solid color, probably gray, to either side of the main post body. I'm new to blogging and code and use blogger.com

    Can you help me out? My site is http://snowfrogphoto.blogspot.com/

  64. Hi Sai,

    I've tried to do exactly how you said. No any improvment. I don't know what to do in this situation. I've let those buttons as a simple buttons, but I'm not happy with that.

    If someone had the same issue please tell me how you did solve it.

    Thanks in advance.

  65. Ok… so before I even get to step 3 and I click "preview" (before I save it) it says, "We were unable to preview your template. More than one widget was found with id: HTML2. Widget IDs should be unique."

    Umm…. is the code incorrect?

    I REALLY want one of these and read all the comments but I cant get past step 2.

  66. Although that is not because of this widget but anyways, find the phrase "HTML2" in your tempalte, it should be present two times in your tempalte.
    Change any one of them to either HTML20 / HTML21 or any other number which is not there already in your template.
    Save the template then add this widget to your blog.

  67. I am so glad I found this site! It has helped me so much!

    I am working on adding one of these drop down menus to my blog, but I want to add more buttons. I tried just copying and pasting the code for the existing buttons, but the additional button and associated drop down menu show up as a bulleted list. Can you tell me what to do to make it work?

    I haven't had any other problems. Thanks again for such a great resource!

  68. Hi Jess,

    Here's the code you are presently using on your test-blog:

    <ul id="jsddm">
    <li><a href="#">1</a>

    <li><a href="#">6e</a></li>

    And, the code you should use is this….you just have to see the positions of opening and closing of the tags li and ul.

    <ul id="jsddm">
    <li><a href="#">1</a>
    <li><a href="#">1a</a></li>
    <li><a href="#">1b</a></li>
    <li><a href="#">1c</a></li>
    <li><a href="#">2</a>
    <li><a href="#">2a</a></li>
    <li><a href="#">2b</a></li>
    <li><a href="#">2c</a></li>
    <li><a href="#">2d</a></li>
    <li><a href="#">2e</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a>
    <li><a href="#">6a</a></li>
    <li><a href="#">6b</a></li>
    <li><a href="#">6c</a></li>
    <li><a href="#">6d</a></li>
    <li><a href="#">6e</a></li>

    Glad I could help you Jess…

  69. hi…
    at first i've tried so hard but still sure these will work!
    and i did it…until i found something strange with these ddmenus…
    i wanna make the dd box lilbit transparent,but it doesnt work…
    and theres a weird transparent dialogue box appear under those dd menu ~X(
    and the movement of those dd box always too late to opened or closing exactly after i click it…even its still appear after the post still opened!:-t
    ow..and another one…how could i make the post appear with the dd menus?i mean not only the post tittle…
    and last, how can i make my blog post colum wider than now?im using minima template.

    btw…this is my blog with ur idea
    im so excited if my blog does really work…
    and im glad i can found ur tutorials that makes all look easy with me.
    sorry with my bad grammar but thx a lot…

    ps: i hope im not interupted u around ;p

  70. Yes you can certainly do that, but use small images like small rectangle of width around 200pixels and height around 30 pixels.

    And instead of this code:

    background: #324143; /*DARK-GREEN*/

    use this one:

    background: url(http://DIRECT_LINK_TO_THAT_IMAGE.jpg); /*DARK-GREEN*/

    of course, change that url and put only the DIRECT LINK to the image of your choice, for the direct link upload your image to tinypic.com

    and similarly, change other two lines of code too, viz.

    background: #A9C251; /*LIGHT-GREEN*/


    { background: #8EA344}

  71. Okay, but for the images, I mean more of a map header. I have one that I'm using for my design business, but is the code capable of corresponding with a map image?

  72. Hello Sai,

    I see how you help people here and I am really impressed. I hope you will come through for me too.

    Just customizing my new blog (no content yet) want to make it look a little inviting first.
    Here's the url http://relationship-issues-and-answers.blogspot.com (I'll get a custom name when I am done editing the template)

    I have added the code for the drop down menu (though edited now) and it worked.

    Now my problem is 'how do I make the tabs link to actual pages created?

    This is what I have tried:

    I wanted to create a Contact me page with a contact form (following your suggestion in a post) on it. You suggested we create a Contact me and Thank you page first. So I used the normal Edit pages to create a Contact page. Now I tried to link tab in the blog to the page by adding the 'CONTACT ME' to the HTML/Javascript I copied here. But it didn't open.

    The question is: after creating the drop downs, how do you now create their actual pages and have the tab link to them? That is when someone click on the tab, he is taken to the page for it.

    Now that's one of my problems and a major one at that.

    The others are:

    I want to clean up my template

    I want the 'Already a member sign in' by the right side to be out

    I want to crossed arrows by each item to be off, they irritate me.

    I also want the subscribe to: Posts (Atom) to be out.

    And even when my Template was designed by Pyzam and powered by blogger, I don't think it should be displayed as obvious as it is now. Can I hide it somewhere?

    I am counting on you to help out.

    I also want you to comment on my template in relation to my topic. What do you think will be visitors first impression? Does it offer WARMNESS? Any advice will be appreciated

  73. Seems to be a problem now that Blogger has the new template design.

    Have used your drop down menu for about a year and very pleased with it.
    However, I've just tried to add in another submenu link and when I click save it wants something added in the widget title field.
    Have ended up with an ugly dot above the tabs to make it work at present.

  74. Hi .. added the below code, but something went wrong somewhere as not able to select the submenu as once moved the mouse, the submenu just disappear.. need help here.. thank you ~ ๐Ÿ˜‰

    This is the code:

    body {
    behavior: url(csshover.htc);
    font-family:Arial, Helvetica, sans-serif;

    p a {
    color: #000;

    p a:hover{ text-decoration: none!important;

    ul#nav {
    list-style: none;
    padding: 0;
    margin: 0;

    ul#nav li a {
    display: block;
    font-weight: bold;
    padding: 2px 10px;

    ul#nav li a:hover{

    ul#nav li {
    float: left;
    position: relative;
    width: 100px;
    text-align: center;
    border:1px solid #ccc;


    ul#nav li.current a{

    ul#nav li.current a:hover{

    li ul {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    font-weight: normal;
    padding: 1px 0 10px 0;

    ul#nav li ul.sub li{
    border-width:0 1px 1px 1px!important;

    ul#nav li ul.sub li a{
    font-weight: normal!important;
    li>ul {
    top: auto;
    left: auto;

    li:hover ul, li.over ul {
    display: block;

  75. Hello, thank you for this post! I tried it and it worked fine – whew! Very relief. Except, I need to edit the menu titles, for example: contact me, how do I do this. I did not see anyone ask this in your questions.

  76. @Shinny
    I checked your blog (gorunningwithdallam.blogspot.com) and found he widget without any title, as you wanted hope that was some temporary glitch.

  77. @Mac premium,
    Checked your blog too, As yoiu are using the other multi-level menu….which is already almost similar to the one I'm using, so I guess that solves your purpose…

  78. @Self Sagacity,

    Edit the code in step 3 (look for those word in that gray box and replace with your own words.) Study that code and you can similarly add/remove items from that list.

  79. there is a lot of gap between the menu bar and blogpost gadgets in my blog,did i do mistake,if u don't mind just check my blog and giv me a suggestion by looking at its appearence,it's fordevotees.blogspot.com

  80. Hi Sravani,
    Instead of adding the code in a HTML/JavaScript widget (as described in STEP #3), paste that code in your template itself, exactly at this location:
    ABOVE this code:

    <div class='main-outer'>

    Tell me if that solves your problem…

  81. hai sai,i tried the way u preffered me,but it created a new prob lik the whole menu bar when behind the post body
    so i tried in a different way which solved my prob,it is by editind these changes in the html suggested by u,

    #jsddm li ul
    { margin: 0;
    padding: 0;
    position: absolute;
    top: 28px;
    z-index: +1;
    visibility: hidden;
    border-top: 1px solid white}

    the code ….top: 28px;……can be changed according to the blogger's requrement depending upon their measurement of blocks in menu bar
    Thank u for ur help in giving the procedure to create a drop-down menu

  82. @The Autophobic Golden Gods

    Just as shown in the comment #185 (by Sravani), add that code:
    z-index: +1;

    to your code too. Instead of +1 you can use any other number too, like 50/100 etc.


    Please give your blog address and tell me exactly in which widget do you want to arrane the links.

  83. hi sai,dis is sravani,here is url:fordevotees.blogspot.com
    I want to sort all the links in my blog,such as if viewers click on any of my tabs in menu bar lik images,mp3 downloads,lyrics etc..,the links must appear in alphabetical order
    Thanks in advance

  84. Well, using any script just to sort links alphabetically won't be wise I think, as it will delay your blog's loading time unecessarily.
    Rather, you should manually do it yourself, and while adding the links to your code paste them in that order only.

  85. This has worked ๐Ÿ™‚

    but I am still left wondering…

    Why does the drop down menu and elelments go under my posts?

    How d0 I add the desired links to these pages

    How do I change the name of these buttons to correspond with my site (on all levels)

    Thanks in advanced


  86. hi sai.This really helped me a lot.But the problem is when i place the mouse cursor on the sub menus item . The sub menu item was not highlighted . Plz help me out with this . Looking forward for the answer

  87. Hi Sia

    the +100 didnt work and also the links in the widget are not working correctly.

    have I put them in correctly do you know? I took this advice from a comment above… "#" putting the link where the hash is? the drop down element does not even seem selectable?
    Thanks for your feedback


  88. Hi Sia

    That tip didn't work I am afraid any other ideas? Also I cant seem to get the pages to link either on the drop down elements all though I am putting the links in '"#"' this area of the code like advised on the comment above.Any ideas please?


  89. Hello Sai!!
    Thank you very much for posting this very useful tutorial along with the multi-level drop-down menu! Really appreciate it!
    I have 2 questions for you:
    1)I am using the simple drop down menu on my blog http://meryeniko.blogspot.com/
    The sublinks have long titles and I wish to keep them that long. These sublinks are displayed as horizontally elongated boxes. Is there a way to make the text/sublink titles go in more than one line so that they're displayed more like square-boxes?
    (I noticed that the multi-level menu doesn't make these elongated horizontal boxes, but the multi-level drop down was working only in Firefox when I tested it /didnt work in either Explorer or Chrome/).

    2) Also, the submenu boxes are displayed behind my right sidebar in Firefox, I tried using both #jsddm {
    margin: 0;
    padding: 0;
    z-index: +1;
    z-index: +100;
    but I still have the same problem. I added a 80px bottom padding but obviously it is only a temporary solution for this issue. How can this issue be solved?

    Any tips would be greatly appreciated if you find time to answer my questions.
    Keep on with the good work!
    Best wishes! Eniko

  90. 1. Instead of auto-width, use a fixed width for the sub-menus.
    So, change this:

    #jsddm li ul li a
    { width: auto;

    to this:

    #jsddm li ul li a
    { width: 275px;

    2. (Not sure, let's try)
    Instead of adding that z-index: 100; to jsddm, add it to crosscol-wrapper.

    so add this code to your tempalte (add it anywhere in the CSS section):

    #crosscol-wrapper {
    z-index: 100;

  91. Hello Sai!!
    Thank you for the quick reply!!!

    I've tried what you suggested:
    question Nr 2)
    #crosscol-wrapper {
    z-index: 100;
    isn't working, unfortunately.

    Nr 1) I tried setting a fixed with in
    #jsddm li ul li a
    already, I tried it again now but it simply cuts off the rest of the lengthy text.

    Is there a way to make the text go in more than one line within a box in the sublink menu?

    I'm more concerned with nr 1) and not so much worried about nr 2)

    Sorry for the trouble!
    Appreciate any help

  92. Hi Sai!

    I've found the answer for my question nr 1), that is how to make the text wrap or go in more than one line in the sublink boxes.

    I set the white-space attribute to "normal" instead of "nowrap".
    Also, adjusted the "height" attribute to "auto" in
    #jsddm li ul li a

    The boxes are still displayed behind the right sidebar, though, I haven't been able to fix that yet.

    Take care!

  93. I haven't been able to get the drop down portion of the menu to appear. I was successful in changing the colors and aligning it to my header, but am unable to get the drop down to drop down. Any hints or clues?

  94. hey there~ I loooove the look of this menu. It looks amazing with my site. I'm sure you're terribly busy, but I was wondering if you were thinking about ever attempting to just this code to work if it is placed right under the header? I'm just such a fan of the look of this one that I am trying to avoid finding a new code for a drop-down menu… my site is orfeevigori.blogspot.com (still under construction)

  95. All of a sudden, the menu won't drop down anymore. It was fins this morning, but nothing changed. There were no edits to the template, the code, no downloads to my PC and nothing was installed.

    Any idea why the drop down part is no longer showing up?


  96. I finally got it fixed! It turns out that if your drop-down boxes aren't showing up at all, make sure the code in Step #2 is the FIRST thing ABOVE < / head >

    If it's not the first thing above the < / head > tag, then it may not work.

  97. I tried to solve my problem,n made to my requirement
    this is how made,I removed complete Tabs from my theme and I got,
    but I dont suggest the same solution to everyone,I think it is better to choose a theme which doesn't have Tabs in it template,to make this drop-down work in IE

  98. Hello I used this on my blog and thanks so much for putting this out there for me to use. Although I need help. It's hiding some of my sub menus. (http://theaprilsheree.com) I have played with it but I decided to leave it alone for now and just ask for assistance. Also how can I get all the tabs to show? Please take a look and let me know when you get a chance.

  99. thank uuu, I owe you BIG TIME,

    it works for me, only when I add more blocks (for more labels), always is left a small piece of white space (inside the menu border from the right side)

    any ideas, please

  100. Hey Sai,

    You seem to know a lot here. I can't seem to get this to work. Everything is set up right, but the drop down portions of the menu drop down behind the post.

    How can I get my drop down menu in front of my posts?


  101. i tried your trick and it works on my blog. my problem now is i want to place the menu just above my blog's header but it simply doesn't work.I have a link ad above my header and i want to exchange the placement of my menu tab and the link ad. my menu menu doesn't fall in the same line. it all scattered.

    you can check my blog at http://www.yourgateway2success.com. any help will be much appreciated. thanks a lot.

  102. Hi..
    Thanks for sharing this information and resources it's really help full for me with the help of this we can improve our designs and development I really inspire with this information thanks

  103. The whole work is appreciable which is clearly defined here by the admin of blog. I never would have thought about it before. I definitely savored every single small bit of it because itโ€™s very useful info for every blog maker. I just would like to say that carry your precious work on regular bases because itโ€™s really knowledge plus for readers.

  104. hi,

    great blog..i found almost everything that i need here..
    however, i have a question. i also added the forum (that i also read from your blog and it works perfect!). my question is my submenu in the dropdown are hiding behind the forum..

    pls help..

  105. I've been removed ur dd menus from my blog cos of u didn't help me nor aswer my question at all….i've been asked u twice and linkedin ur url to all my site also giving u help by always visit&clickin ur ads/sponsor and many more,,,but u never answer all my question!
    i want to ask u once again about my homework that my boss giving it to me now….but,i think i better NOT TO ASK U FOR THE THIRD TIME….!
    really dissappointing me…

Leave a Reply

Your email address will not be published. Required fields are marked *