July 2, 2011

Widgets

Create a Drop Down Menu In Blogger


Update: We have published almost 9 more menus like this one. To get them all just use the search box and type drop down menu. If you wish to add the same menu to Blogger Template Designer templates then read this post -> Custom Drop Down menu

image
Why do you run after scripts such as jquery while you can use simple CSS and HTML to create beautiful drop down menus for your blog. I already shared a list of 30 Navigation menus and now you need to learn how to create a drop down menu in a navigation. I am sharing a simple code here that can be fully customize to make your preferred changes. So lets get to work!


Live Demo


How To Create a Drop Down Menu?

A drop down menu is needed when you have too much content on your blog or you love keeping things organized. To add a drop down menu to your blogger blogs do this:
  1. Go To Blogger > Design > Page Elements
  2. Select a HTML/JavaScript Widget just under the header and paste the following code inside it,
drop down menu
<div id='mbtnavbar'>
      <ul id='mbtnav'>
        <li>
          <a href='#'>Home</a>
        </li>
        <li>
          <a href='#'>About</a>
       </li>
        <li>
          <a href='#'>Contact</a>
        </li>
  <li>
           <a href='#'>Sitemap</a>
            <ul>
                <li><a href='#'>Sub Page #1</a></li>
                <li><a href='#'>Sub Page #2</a></li>
                <li><a href='#'>Sub Page #3</a></li>
              </ul>

        </li>
      </ul>
    </div>
Replace # with your Page Links and the bolded text with relevant page names. The yellow highlighted code is responsible for the drop down menu. You can copy and paste it under any tab you want just before </li>
To add another tab just paste this code above </ul>
<li>
          <a href='#'>Tab Name</a>
        </li>
       
    3.   Now Go to Design > Edit HTML
    4.   Backup your template and search for ,
]]></b:skin>
     3.   Just above it paste the code below,
/*----- MBT Drop Down Menu ----*/

#mbtnavbar {
    background: #060505;
    width: 960px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;
}

#mbtnav {
    margin: 0;
    padding: 0;
}
#mbtnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mbtnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
       
}
#mbtnav li a:hover, #mbtnav li a:active {
    background: #BF0100;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
       
   
       
}
#mbtnav li {
    float: left;
    padding: 0;
}
#mbtnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#mbtnav li ul a {
    width: 140px;
}
#mbtnav li ul ul {
    margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
    left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
    left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
    position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
    background: #BF0100;
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
   
}
#mbtnav li li a:hover, #mbtnavli li a:active {
    background: #060505;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}
Make these changes:
  • Change #060505 to change background color of the Main menu
  • Change  the yellow highlighted text to change font color, size and family
  • Change #BF0100 to change the background of a tab on mouse hover
  • Change #BF0100 to change the background color of the drop down menu
  • Change #060505 to change the background color of drop down menu on mouse hover
      4.    Save your template and you are done!

Visit your Blogs to see a beautiful Navigation menu just below Header. Have Fun! :)
If you have any questions feel free to post them.


If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

320 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. @Hetal

    I am really pleased that you liked it hetal :)

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. @Meg

    Meg I am sorry but I could not get your first question. Could you kindly share the blog link where you are applying this menu? I can be more helpful if you do provide the link of your test blog

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. @MEG

    Give me 5 minutes I will write the code for you.

    ReplyDelete
  7. MEG I have tested the code and found that the blogger template Watermark that you are using has the Style code by default which is overiding the CSS code for this drop down menu. I have created a new code and will write a post on it within hours so that even other blogger may find it helpful. You can see the demo here ->
    http://facebook-comments-box.blogspot.com/

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
  9. @Meg

    You are welcomed. Post published. You can read it here -> http://www.mybloggertricks.com/2011/07/add-custom-drop-down-menu-to-templates.html

    ReplyDelete
  10. I was able to apply this to the Simple template in Blogger and modify it a bit to match my needs. But for the life of my I can't get it to stretch the entire length of my header. Any thoughts as to what I am doing incorrectly?

    http://www.ohmyachesandpains.info

    ReplyDelete
  11. @ohmyachesandpains

    No problem. In the first part of the CSS code in step#3 change the width from this

    #mbtnavbar {
    background: #060505;
    width: 960px;
    color: #FFF;
    margin: 0px;
    padding: 0;
    position: relative;
    border-top:0px solid #960100;
    height:35px;

    }



    to this


    #mbtnavbar {
    background: #060505;
    width: 100%;
    color: #FFF;
    margin: 0px;
    padding: 0;
    position: relative;
    border-top:0px solid #960100;
    height:35px;

    }

    ReplyDelete
  12. @Mohammad Mustafa Ahmedzai

    I made the change but I didn't seem to work. Anything else I should try?

    ReplyDelete
  13. Thank you SOOO much!! I tried other tutorials but yours is the BEST! And the only one I could get to work. I didn't even scream in the process lol.

    Can you tell me how to get rid of the little white line that runs down the left side of the drop-down? Or how to make it appear all the way down for all of them? It only appears on the second and third lines of the 'Sitemap' box.

    Here's my url: http://peachysavinglab.blogspot.com/

    ReplyDelete
  14. @ohmy
    Please read this post -> http://www.mybloggertricks.com/2011/07/add-custom-drop-down-menu-to-templates.html


    @Amanda

    You are always welcomed pal. The solutions to all your questions are on this page ->
    http://www.mybloggertricks.com/2011/07/add-custom-drop-down-menu-to-templates.html

    ReplyDelete
  15. YO, i followed the directions perfectly and everything worked out, except there is no drop down...my site is www.freshrespect.blogspot.com. you will see that i have the basic blogger pages on the top but I am in the works of replacing them with your tabs. so i started, and i added subpages to both Album reviews and the truth (the truth, before was sitemap already had 3 sub pages and they never showed up either)....whats the deal????

    ReplyDelete
  16. For some reason when I paste in the mbt menu code and save it, it converts the links to entirely lowercase. And then blogger doesn't recognize the URL. Can you help? http://welovesoaps.net

    ReplyDelete
  17. Awesome blog! i got to learn about someone new info from this article..Thanks for sharing!

    Menu Templates

    ReplyDelete
  18. Hi Mohammad, thank you so much for posting such a helpful tutorial. It was just what I was looking for. I have one problem, when I scroll over the drop down menu (to click on a page) it disappears before I can click it! Is there something in josh's original code (I am using the Simple template) that is overriding your code? I have followed the steps on your tutorial about this but it is not working. Am I doing something wrong? Any help you can give me would be greatly appreciated. Many thanks, Alex.

    ReplyDelete
  19. my blog is http://www.bettycox.blogspot.com by the way, if that helps.

    ReplyDelete
  20. i have now managed to get it to work but only when the font for my menu bar is at 12px or less. any bigger and the drop down menu disappears. is this a height problem? do i need to adjust the size of the body of my blog? sorry for all the questions, i'm just so confused, i've been trying all day to fix it. :(

    ReplyDelete
  21. Thank you so very much for posting this! Your tutorial was quite easy to understand, and so helpful! I just have one question (which probably has a very simple answer)...how do I get the text in my drop down menu to be center aligned? I have tried - with my limited knowledge - to change the code on my own, but nothing seems to work! Any help would be much appreciated. Thank you! Jess.

    ReplyDelete
  22. I was able to get this to work great on my blog! However, I was curious, is there a way to add a sub page to one of the sub pages? Sorry if that's confusing I couldn't think of another way to ask. Thanks for the great tutorial. =)

    ReplyDelete
  23. great article

    visit:
    http://internetricks4u.blogspot.com/

    ReplyDelete
  24. This comment has been removed by the author.

    ReplyDelete
  25. This comment has been removed by the author.

    ReplyDelete
  26. Hello, Can you help me with my blog?

    I try so many codes to use on the html gadget just to have that drop down menu. but it did't work. maybe i was wrong with the div class or ul class. Here's my blog: http://photoshopph.blogspot.com/

    and here's the code for my navigation:
    .ddsmoothmenu {
    margin-top: 6px;
    float: left;
    border-right: 1px solid #2F2F2F;
    }

    .ddsmoothmenu ul li {
    float: left;
    }

    .ddsmoothmenu ul li a{
    display: block;
    color: #ccc;
    text-decoration: none;
    border-left: 1px solid #2F2F2F;
    height: 42px;
    line-height: 42px;
    text-transform: uppercase;
    font-size: 11px;
    padding: 0 12px;
    }

    .ddsmoothmenu ul li a:hover {
    color: #FFFFFF;
    background: url(http://lh4.ggpht.com/_Kwwy9VyLMKw/TGxGXjQNYWI/AAAAAAAADSA/yRGz_PBg9cA/bk_top_hover.png) 50% 0 no-repeat;
    }

    ReplyDelete
  27. @Manuel

    Your code has sub CSS classes missing that perfectly aligns the body of your navigation menu. I would advise that you use the drop down menu above and customize it so that it may blend your blog.

    ReplyDelete
  28. @Mohammad Mustafa Ahmedzai

    So i will replace that code using the code you gave above ???

    ReplyDelete
  29. The 1st item in my drop down list covers the original category in the navigation bar. Suggestions?
    www.template13.blogspot.com

    ReplyDelete
  30. vignaat.blogspot.com

    no background color

    ReplyDelete
  31. sir i'm again i'dd use your code drop down but i got the error when i click save template. it said html 3 not accepted.Thanks for the code Your so genius...

    ReplyDelete
  32. my site www.armasector.blogspot.com

    ReplyDelete
  33. Hi, Thank you very much for your tutorial! It was a great help. I'm also trying to add a vertical scroll bar to my dropdown menu (the submenu has over 20 items!) Any idea how it can be done?

    ReplyDelete
  34. hi may i know how to center the alignment for the menubar?

    ReplyDelete
  35. @Manuel
    yes I mean just remove the code in your template and use this one.

    @swordleaves
    I checked your blog and I guess I am too late to reply because you already solved the problem. :d

    @Prithi

    For a vertical scroll down kindly read this post: http://www.mybloggertricks.com/2011/07/create-drop-down-menu-in-facebook-style.html

    @chompoo

    Enclode the menu code between these two additional tags,

    <center>
    ADD MENU CODE HERE
    </center>

    ReplyDelete
  36. can u tell me what to write in page links

    ReplyDelete
  37. Unfortunately, it didn't work for me. All I got was the text of the tabs and subtabs printed on the screen. No actual tabs. Nothing to drop down.

    Thanks

    ReplyDelete
  38. THanks! It works fine. thats what am using now on my blog www.deluxetrick.blogspot.com

    ReplyDelete
  39. Thanks! that worked. just one more thing.. its fine on the main page however, when its in other pages, the tabs will be behind the pictures... may i know how to solve that?

    eg. http://www.voguechompoo.com/search/label/outer

    ReplyDelete
  40. Thank you SOOO much! I've tried 5 different tutorials and finally, this one works! Yay!

    ReplyDelete
  41. This comment has been removed by the author.

    ReplyDelete
  42. This comment has been removed by the author.

    ReplyDelete
  43. This comment has been removed by the author.

    ReplyDelete
  44. Hey one more thing, I can't align the twitter follow button (javascript) horizontally. Please help me with this...
    I need help asap! Thanks!

    preview my blog @ http://www.win7extremeblog.info

    ReplyDelete
  45. very good topic.........!!!!!


    It solve my problem.

    TFS

    i'll share it.

    ReplyDelete
  46. Hi Mohammad bro,

    Is it possible to create drop down for the sites like apple.com ?
    Apples navigational bar looks very elegant and classy. Currently i am trying to create new and diffeent drop downs.

    I have created Green Nature Theme drop Down but i am not able to change its size on li hover block.
    Green Nature Drop Down Theme

    Have a look and let me know what can be done.

    ReplyDelete
  47. This comment has been removed by the author.

    ReplyDelete
  48. hi
    it is very useful tutorial
    i apply on my blog but there is a problem in the drop down list it missing two pages it always show just one page in the drop down menu
    second there is a space before 'home' page
    plzz solve it
    this is my blog
    http://crescentcollection.blogspot.com/

    ReplyDelete
  49. thanks a lot dude..its works great..

    ReplyDelete
  50. hey ! i very like your drop menu , but in my site it need to be more right, how i can do it?

    Thank you!

    ReplyDelete
  51. Hi

    This is an excellent article thanks! I'm stuck though trying to find the code to make the menu drop down in a straight line? It seems to be slightly to the right below the main tabs when it expands?

    Please let me know thanks!

    ReplyDelete
  52. Fabulously simple to follow!!! Thank you, this was exactly what I was looking for!

    ReplyDelete
  53. This comment has been removed by the author.

    ReplyDelete
  54. This comment has been removed by the author.

    ReplyDelete
  55. First of all, I'd like to say what a great and useful tutorial this is!
    Second, Argh! I am getting annoyed at the fact that the first time I did the menu, it worked great. I kept changing the colors and fonts and sizes. Then when I went to my blog, There was about a centimeter space between the actual tab and it's menu. Then I couldn't even put my mouse on one of the links in the menu because it would dissapear once I moved my mouse off the tab. HELP!
    thanks!!!!!!!!!!!!!!

    ReplyDelete
  56. Thank you so much!! I finally have a drop-down menu! It was hard at first, but i got so used to it and it became so easy!!!!

    ReplyDelete
  57. As salam Mohammad,

    Thank for your drop list. I need your assistance how to link my blog label to my drop down list. If i link to my page it's work fine. http://amz-eli.blogspot.com/

    Your assistance is much apprecaite.
    Regards Hamzah

    ReplyDelete
  58. Hello:)
    This worked perfectly except on thing: The drop down menu dissapear before i manage to klick on the drop down's. Something to be fixed? :)Please help me..

    Beside that I am so happy the drop down menu is on place. Thank you:)
    My homepage is http://kennelrunaway.blogspot.com

    ReplyDelete
  59. bro mere kaam nai kar raha eh method

    ReplyDelete
  60. I was wondering do you need extra code to make a secondary submenu drop down that would come out of the side of the first submenu.

    ReplyDelete
  61. hi bro this is shoaib

    a am not bale to change background color of main menu wats might be the probs plzz give ma a solution soon...

    www.findmyshoppe.in

    ReplyDelete
  62. HI, WHY I COULDN'T PUT THE MOUSE ON THE NEXT PAGES OF DROP DOWN MENU. THANKS

    ReplyDelete
  63. Hey i have been looking for this simple trick to add a drop down menu on my blogs. Am going to try them and report back to you. Beside you evaluate my blogs here
    http://hotnigerianews.blogspot.com blog for mobile phones and PC.
    And my blog on Education News.
    http://freebrowsinglink.blogspot.com

    am i doing anything wrong with this blogs?

    ReplyDelete
  64. Thank you for the tips! Very useful. I'd like to change the tabs background colours when hovering over them, and the drop down menu colours. I read your advice :
    Make these changes:

    Change #060505 to change background color of the Main menu
    Change the yellow highlighted text to change font color, size and family
    Change #BF0100 to change the background of a tab on mouse hover
    Change #BF0100 to change the background color of the drop down menu
    Change #060505 to change the background color of drop down menu on mouse hover


    BUT, what do I actually change? The number? I want green instead of red.

    Thanks for your help!

    ReplyDelete
  65. Good day, I tried many times and i m very sure i followed all the instruction, but the drop down failed :( please help me...

    derekclk-loyaltyprogram.blogspot.com

    ReplyDelete
  66. Hi sir This Code is best working for Firefox and Chrome but it is not working in Explorer
    Could you please guide how to make it perfect in explorer also
    With regards
    MD. ZAKIR ALI

    ReplyDelete
  67. Menu Code works great in Google Chrome and Firefox. However, it does not work with Internet Explorer. Drop down menu portions fall behind my Blogger post. Any suggestions on how to avert this problem. If I can resolve this issue, it will be a great resource.
    Testing this code on a music blog site for our school: http://musicfsa.blogspot.com/

    ReplyDelete
  68. Still wondering if anyone has been experiencing same problem as above using this menu in Internet Explorer?

    Keith

    ReplyDelete
  69. Thanks for sharing this..I used this on my blog..
    http://www.rlamsal.com.np

    ReplyDelete
  70. thanks alot but I have one problem, when I scroll over the drop down menu (to click on a page) it disappears before I can click it also the drop down list is not in the center... any suggestions plz

    ReplyDelete
  71. my blog is
    http://ibnee.blogspot.com
    thanks

    ReplyDelete
  72. thank you so much . It. I have one problem, when I scroll over the drop down menu (to click on a page) it disappears before I can click it also the list is not centered >>any suggestions
    my blog:
    http://ibnee.blogspot.com

    ReplyDelete
  73. Hello Mohammad. Thank you for that lovely post on how to make a drop down menu on blogger! Awesome. However, I too, like others who commented here, am having the problem on internet explorere. The drop down menu goes behind the blog text and when you try to click on one of the drop down options, it disappears. Any help,please? thanks so much! If you need to see what's happening, my blog is at http://onlinemoneytrip.blogspot.com"

    ~Lisha

    ReplyDelete
  74. Thanks,this is great,i simply love it.
    It works well on my blog at
    http://www.freebrowsingtime.blogspot.com,the christmas snow is falling,this is great.all thanks to you.

    ReplyDelete
  75. friends koye mujy bataya ga menu may posting kasay karni hay?

    ReplyDelete
  76. I tried doing this over and over, and I still can not get it.. Is there anyway you can possibly do this for me on my blog, and I'll give you the info as to what to write on the drop down tabs?

    ReplyDelete
  77. I posted the code correctly but for some reason there is no drop down. Can you please help? Here is the code:
    /*----- MBT Drop Down Menu ----*/

    #mbtnavbar {
    background: #544e15;
    width: 960px;
    color: #FFF;
    margin: 0px;
    padding: 0;
    position: relative;
    border-top:0px solid #960100;
    height:35px;
    }

    #mbtnav {
    margin: 0;
    padding: 0;
    }
    #mbtnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #mbtnav li {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left:1px solid #333;
    border-right:1px solid #333;
    height:35px;
    }
    #mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;

    }
    #mbtnav li a:hover, #mbtnav li a:active {
    background: #BF0100;
    color: #FFF;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 9px 12px 10px 12px;



    }
    #mbtnav li {
    float: left;
    padding: 0;
    }
    #mbtnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
    }
    #mbtnav li ul a {
    width: 140px;
    }
    #mbtnav li ul ul {
    margin: -25px 0 0 161px;
    }
    #mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
    left: -999em;
    }
    #mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
    left: auto;
    }
    #mbtnav li:hover, #mbtnav li.sfhover {
    position: static;
    }
    #mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
    background: #BF0100;
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
    z-index:9999;
    border-bottom:1px dotted #333;

    }
    #mbtnav li li a:hover, #mbtnavli li a:active {
    background: #060505;
    color: #FFF;
    display: block;
    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
    }
    ]]>

    ReplyDelete
  78. Tried it and if it worked it would be very cool. When the drop down menu expands it is covered by the main page. Check out http://www.theblogtipper.com to see what I'm talking about.

    ReplyDelete
  79. Hello,
    I tried this code for my blog: http://vickie-book-goddess.blogspot.com/
    For starters it worked however when I changed colours I could't press drop down menus option any more. When I placed mouse over drop down it just vanished and can't be clicked. Please help! )=

    ReplyDelete
  80. hello,
    i just created my new blog about android stuff , but after i did everything the options are just there ..please help me ...
    here is my blog http://androidcop.blogspot.com/

    please help me

    ReplyDelete
  81. can i have multiple dropdown with this script

    ReplyDelete
  82. thank you soooooooooooo much admin ! jazakallah ! u rock ! amazing .thank you ...can u just tell me how to stretch the tabs bar because its very short ..please tell me ... - here is my blog
    www.androidcop.blogspot.com

    ReplyDelete
  83. hello admin , assalamalaikum, i m very thankful to you :) thank you for this wonderful blog ... please tell me how to arrange this tab in my blog because its not in its perfect place ..how should i move it ?

    ReplyDelete
  84. I really like your site. Thank you for sharing your knowlegde :) peace

    ReplyDelete
  85. great page but can ia put informations in this pages?

    ReplyDelete
  86. I can't get navigation bar to have more than one subject on the drop down menu..not sure why this is happening, I've tried re-doing the whole thing but nothing changed. Help please! :) All the tabs work such as 'Home' and 'About', but only the first tab on the drop down menu shows up for each (only Sub Page #1's)

    ReplyDelete
  87. I can't get navigation bar to have more than one subject on the drop down menu..not sure why this is happening, I've tried re-doing the whole thing but nothing changed. Help please! :) All the tabs work such as 'Home' and 'About', but only the first tab on the drop down menu shows up for each (only Sub Page #1's)

    ReplyDelete
  88. thanks for this bro..however, I can't make it align with the banner..can you help me with this?

    AAL

    ReplyDelete
    Replies
    1. Thanks for the tutorial though, the drop down menu works fine..

      Delete
  89. Mohammad, I've already applied this in my blog. But how would I know that my post will be linked with my drop down menu? Please advise. Thanks....

    ReplyDelete
  90. Hi, Thank you for this easy-to-follow instructions. However, the link on my drop down menu directs to a blank page. here's my blog url: http://merelyforpersonalsatisfaction.blogspot.com

    Again, thank you and I hope you can help me solve my problem with drop down menus.

    Mavic

    ReplyDelete
  91. hi good day.

    Mohammad, this info is very uiseful however, when you click the menu and sub-menu its empty. How come?

    Please help me.

    ReplyDelete
  92. this is my blog www.phtvnews.blogspot.com.

    ReplyDelete
  93. my css drop down menu not working properly.. plz check n do help.
    http://newsongseveryday.blogspot.com/

    ReplyDelete
  94. Hi friend.
    I really pray that you will help me...

    I have a blog, the www.seaspinning.net
    If you visit it, you will see a drop down menu.

    The problem is that it does not work on IE, no matter the edition.
    I use the IE9 and the problem still exists. The menu works only with FF.

    Is there a solution?

    Please help...

    ReplyDelete
  95. Bro when i copied it above ..skin it appeared on the top of navigation bar..what wrong? http://semetahealth.blogspot.com

    ReplyDelete
  96. should i specify my head with navbar or can i use that code mtbnav directly?

    ReplyDelete
  97. it is showing
    Warning: Your new template does not include the following widgets:

    HTML6
    Would you like to keep these widgets on your blog or delete them?
    Deleting widgets cannot be undone.

    ReplyDelete
  98. when i used that code to get drop down menu in edit html after saving the changes it is saying
    Warning: Your new template does not include the following widgets:

    HTML6
    Would you like to keep these widgets on your blog or delete them?
    Deleting widgets cannot be undone.
    need reply plz

    ReplyDelete
  99. can u please help me ?
    this code is not working properly for my blog ?
    what should i do now ?
    this drop down shown as horizontal not vertical on my blog
    blog -www.kedarnath-dham.blogspot.com

    ReplyDelete
  100. I have a question and maybe you can help....the header of my blog got pushed up and is covering the navigation bar on blogger. It is also getting cut off a little because somehow is got pushed up...anyway you could help me bring it back down?? http://www.madebylena.com/ you can look at it for yourself and help me figure out to fix it (possibly). Thanks so much!!!

    ReplyDelete
  101. HELLO MOHHAMAD..
    YOU ARE GUD BLOGGING TEACHER..
    ACTUALLY I HAVE FOUND A BLOGGING DROP DOWN MENU
    WHICH IS VERY INTERSESTING
    BUT THERE IS SOME PROBLEM IN THAT IT GOES AT BACKSIDE OF BLOG POST BODY.
    YOU CAN CHECK IT PLEASE AND GIVE ME THE SOLUTION..
    HERE ISITS LINK
    http://www.allblogtools.com/tricks-and-hacks/add-beautiful-drop-down-menu-for-blogger/

    ReplyDelete
  102. Nice work !
    I have tried this, but the submenu (under one particular tab appear side by side, and not one below the other.).. pls help !

    ReplyDelete
  103. hi, i try this tricks, but it doesn;t work for may simple template. i dont know whats the problem.. and also i try ur read more link it doesn't work also, i nid to edit my post and do jump break.. can you help me

    ReplyDelete
  104. I Replaced # with my site links...But its not navigating to those link :(

    ReplyDelete
  105. hi.this drop menu work well.but asking how to allign center the page tab?thanks

    ReplyDelete
  106. Hi, I am a new blogger in the process of editing the customised template..there is a menu already present in the template but how can i attach a page to the particular menu..b'coz when you click on a particular menu it says "page not found in the blog"...plz help me...

    ReplyDelete
  107. Nice Post More Free blog Templates Visit here http://www.amditechnology.com/2011/10/blog-templates.html

    ReplyDelete
  108. I have some problem with this..

    please help me..

    ReplyDelete
  109. @Hetal Patil Rawat

    Mr mohammad, when I use this in my blog, the menu is like go right, I mean like have a border than not on right position. ASAP thx

    ReplyDelete
  110. can you fix the menu scripts? please... because the menu is going to right, the dropdown is fine, the problem is just is too big, how I change it? ASAP and thx, reply in email vincentvendeta@gmail.com

    ReplyDelete
  111. nice way of explaining the things, i have used this method to put a drop down menu on my blog.

    www.licbombay.blogspot.com


    thank you very much for uploading this bit of thing.

    ReplyDelete
  112. thank you so much ... this really make me happy, at the end i can make it too like other people. May i ask one question ? How to connected my post to the menu ? i really new in blog and want to be better.
    Thank you for help and greeting from Bali Island.

    Alam

    ReplyDelete
  113. Hi, I like your dropdown menu very much, I am trying to add it to my blog. I have installed it on my mac with a Safari browser. It works great, except when I test it on internet explorer the drop down menu does not work properly. It cuts off the dropdown in the middle. It seems to be a z index issue with IE. I have worked on this for hours and tried everything I know how. Can you please help me to fix this. Thank you in advance.

    ReplyDelete
  114. almost forgot. my blog adress is www.testingmenu.blogspot.com

    ReplyDelete
  115. I tried them, but sub menu covered by the blog skin
    can you tell me what my mistake? thank's

    ReplyDelete
  116. thanks i made it!


    http://nubentayuno.blogspot.com/

    ReplyDelete
  117. Thanks, it worked like a charm on my test blog! Now if I could only figure out how to center it (or even right-align it). I've tried to enclose menu code with the 'center' tag in the HTML/java widget and it only moved slightly over, but did not center. What could be keeping it from centering? Thank you!

    ReplyDelete
  118. More than one widget was found with id: Navbar1. Widget IDs should be unique.

    THIS IS THE ERROR I GOT IT WHEN I USE THIS CODE
    WHAT CAN I DO

    ReplyDelete
  119. Hi
    I created the menu and i want to thank you for helping me with your articles.
    But i would like to know how to list more than one article in the same category.
    For example in one of the tabs i want to have three of my blog posts shown and not only one. As the blog grows more posts should appear when a visitor clicks on one of the tabs. How can i make this happen? I hope i was clear.
    Thanks in advance.
    PS. In order to help u create a clear idea on what i am asking for i will post my blog url as well.
    http://ekonomiashqiptare.blogspot.com/

    ReplyDelete
  120. I don't understand what happened, I tried to install my blog from a backed up template and now my drop down menu tabs don't work. Any idea what is going wrong?

    http://www.calgaryplaygroundreview.com

    ReplyDelete
  121. I am getting ready to give this drop down menu a place of dishonor in my new blog the "bloggerJunkYard.blogspot.com which will debuting soon. One question though Is this menu fixable cross browser or not, that is the question I put to you before I go ahead. thanks

    ReplyDelete
  122. i've used this drop down menu on my blog but it appears only in the homepage, how can i see the menu in all the pages?

    ReplyDelete
  123. Hi, I used this and it worked great, except for one thing...It took away the photo I was using as my background. The photo still shows up on the top of the page, but from the menu down, it's all white. Is there a way to keep my picture as the background and still use this code? Thanks so much. I know absolutely nothing about computers/blogs, but you explained this really well.

    ReplyDelete
  124. Very nice. i get information for my blog. visit back to my blog.

    ReplyDelete
  125. It is very usefull Sir. is there any method to create sub menu for dorp down menu ?

    ReplyDelete
  126. sir,
    thank you very much..
    this is working fantastic on my blog!!

    ReplyDelete
  127. Hello Mohammad, I am running into the problem where my drop down is cut off by the post matting. It only has room to show one drop down on a list that has three. I tried changing the Width: 960px to 100% but that did not work.

    My site (Which is my test site) is http://addressmthl.blogspot.com/

    Can you help?

    ReplyDelete
  128. it works like a charm! thanks for this info!
    Check it out: http://blurredfaqs.blogspot.com/

    ReplyDelete
  129. hello sir .. I want to add drop down menu on my blog. but I want DROB down menu is still stuck on the monitor screen. So the menu will not come up when I scroll down on my blog .. essentially create a menu like on FB but the drop down menu. Can you help me / maybe you can check my blog: while I have made ​​but for his DROB down can not be .. instructions please sir. This blog url I
    http://ken-zoo.blogspot.com

    ReplyDelete
  130. Ain't working - no submenu shows

    ReplyDelete
  131. Wow! Awesome tutorial! Easy to follow and a sinch to modify A+++ Thanks Mohammad!

    ReplyDelete
  132. hello sir i am a new blogger, i tried your drop down menu bar and it worked nicely except one thing that the drop down shows the tabs horizontally instead of vertical. Thanks

    ReplyDelete
  133. @M. Murphy

    For 100% width you will have to add the menu right inside your template and not inside a widget. Go To blogger > Design > Edit HTML and paste the code in step#2 below </header>

    It will work just perfect. :)


    @kenzoo

    You can do that by adding position:fixed; just inside

    #mbtnavbar {
    background: #060505;
    width: 960px;
    color: #FFF;
    margin: 0px;
    padding: 0;
    position: relative;
    border-top:0px solid #960100;
    height:35px;

    }

    @abeed

    I guess you are looking for these: Horizontal navigation menus

    :)

    ReplyDelete
  134. how to do send my my navigation links to another website, outside of my blog?

    ReplyDelete
  135. also, here is my website, www.lifeaccordingtoangel.com (as you can see all the links on the bag bar don't work properly. i have tried everything. please advise. :)

    ReplyDelete
  136. hey mohammad i want to refer you to a add network with my reffral if you are interested then
    think about it .it gives really ad like google add if you register with my reffrall i earn some money so if yu consider it if you like
    https://publisher.smowtion.com/users/signup/rahulmauryaemail

    ReplyDelete
  137. Thank you very much very usefull info and hepled me a lot but i have only one problem left how to make thoose pages sub pages active
    HOW TO POST IN THEM ?

    Please help thank you

    ReplyDelete
  138. Wow... Fantastic... check My Blog. Looking gr8. Thanks Mohammad.

    ReplyDelete
  139. I have some problem with it..

    ReplyDelete
  140. The titles that are appearing in the sub pages of my drop down menu are somewhat cutted after applying this code. You can check it out here "http://onlinehealthandfitnes.blogspot.in"
    Please help me with this problem ASAP....

    ReplyDelete
  141. This comment has been removed by the author.

    ReplyDelete
  142. Hey Mohammad, Thank you for the help before it worked just fine, however when I use IE the drop downs are covered and disappear when you try and hover over them. I know that there is a constant problem with IE when it comes to Drop down menus, what possible solution is there to fix this problem. http://addressmthl.blogspot.com/#

    ReplyDelete
  143. Just one word sir..... Thank you....

    ReplyDelete
  144. very nice drop down menu i am using this drop down menu on my PC Tips and Tricks blog
    nice sharing
    Download PC Games

    ReplyDelete
  145. Hi, thanks, great menu. plz help, the drop down gets cut off by the content under it, and is it possible to put the menu under my header, and if possible how? my blog: http://pcgamingshack.blogspot.com.br/
    thanks again

    ReplyDelete
  146. I MA NOT GETTING THE ABOVE MENU BAR IN THE MIDDLE.....PLEASE DO TELL.MY BLOG IS http://tecsac.blogspot.in/

    ReplyDelete
  147. Aussome technology.Reall enjoy it.But it gives complcated errors sometime bxyr

    ReplyDelete
  148. Thank you for your great tutorial. For some reason I cannot figure out how to put my drop down menu below my header. It won't allow me to add a gadget directly below the header. My drop down menu is currently on my sidebar. How do I get my drop down menu below the header from my sidebar? You can see what i'm talking about on my blog: janeylanephotography.blogspot.com

    Thanks!
    Lindsey

    ReplyDelete
  149. Thank you for this wonderful tutorial! I would like to add some clarifications as I hope they might help some other bloggers working with the NEW UPDATED blogger interface;

    1. Go to Blogger, "Your Blog"'s Editing Page, Layout.
    2. Click "Add a Gadget" where you want your Navigation bar to be, then select the "HTML/Javascript" widget. Paste the code into the main box, the title is irrelevant, it just helps you organize your page elements on the Layout page.

    The rest of the steps were very clear. Thank you again!

    ReplyDelete
  150. @Lindsey You need to go to your Layout page, and drag and drop the gadget you added in this tutorial to the place on the page you want it to be. In the old blogger interface you get to this page by going to Blogger > Design > Page Elements. In the new blogger interface you go to Blogger > Your Blog's Editing Page > Layout. Hope this helps!
    PS: You might have to play around a little bit with how/where you are dragging the widget to. For some reason it can be a bit finicky with the area under the title. The best spot I find to drag it to is just above your "Blog Posts" gadget, right in the center, then move it up until it goes full page width.

    ReplyDelete
  151. hello sir please help me
    i m using drop down menu code from http://ddmguide.blogspot.in/
    but there is a little problem i m facing
    my drop down menu is hiding behind the blogpost content in IE7+

    i did every step he mention


    please take a look sir plz plz plz plz bahijan madad kar do

    ReplyDelete
  152. why there is gap between my header image and menu,my post and menu....?
    see my blog

    http://fokatworld.blogspot.in/

    plzz correct the error....:)

    ReplyDelete
  153. @Rachel Lewis

    Thank you so much for your help! I got it to move up there. My next question is now that I have moved it I try to hover over "locations" and start to go down on the drop down menu and they disappear. It happens with "categories" as well. What have I done wrong? And how do I make a post appear under those categories? Sorry this is all new to me. :) Thanks for your help!

    ReplyDelete
  154. @Lindsey You're welcome! I had this problem too, I am using this code;
    http://www.mybloggertricks.com/2011/07/add-custom-drop-down-menu-to-templates.html
    rather than the one listed above. The way I fixed it was to remove;
    "height:34px;"
    under the section
    "#mbtnav li"
    but if you are using the code on this page it is;
    "height:35px;"
    under the same section;
    "#mbtnav li"
    NOT "#mbtnavbar"

    I am not up to scratch on my CSS so I'm not entirely sure why this worked (I removed it for a different reason - my titles were too long) so remove at your own risk!

    ReplyDelete
  155. It worked soo beautifully. I knew HTML so i edited the entire code and made it look so professional like blogger.

    See here www.techytk.blogspot.in

    ReplyDelete
  156. Hi,
    I tried using this code and was able to get a drop down menu bar. I followed your instructions and tried to change the background color on the menu bar (from #060505) to the color of my choice. AFter i saved this, it didn't didn't change the color of the menu bar.

    Also, how I decrease the width of the menu bar and the surrounding border? When I decreased the width from 900-something (what you originally set) to 800 pixels, I still had a gray border that was hanging out.

    Thank you for your help.

    ReplyDelete
  157. This comment has been removed by the author.

    ReplyDelete
  158. Hi I've got a problem. I followed the instructions and it showed the dropdown menu and all that and I configured it a little. However it was right over on the right and after some messing around couldn't get it to work so decided to restore the layout from the code backed up before I changed anything.

    Now, blogger thinks that the pages are installed but they aren't there, and the pages app hasnt been installed on the layout so I can't change it.

    ReplyDelete
  159. How can menu be on the left side not on top?
    link is http://osas-edu.blogspot.com/
    Thanks in advance!

    ReplyDelete
  160. This comment has been removed by the author.

    ReplyDelete
  161. i added this code in my blog. How can i go beyond 2 sub menus? the control is not going beyond to sub menus. it shows on the list but i am not able to click that option. please reply

    ReplyDelete
  162. I have tried adding drop down to my main folders but they don't seem to drop down they don't end up in a folder as a sub folder. It just puts more folder on bar what am I doing wrong?

    ReplyDelete
  163. hi Mohammad,

    Well, I could create the drop down menu with a readymade template. But, I have a different problem. How do I write or add content on those pages? If I create a page on blogger, it doesn't get listed under the sub menu. Please help, please..... :'(

    Regards,
    Manashree

    ReplyDelete
  164. This comment has been removed by the author.

    ReplyDelete
  165. This is really a very reputed and helpful website.I really liked it but i also have a query to you.With my great request,i want your help.

    My problem:-I cannot use these tutorials in a good theme,it can be only used in the blogger themes which are default provided by blogger.And secondly,as i want to blog about different kinds of sports.I want pages parenting which is been provided by you very nicely,means example(Cricket-ICC,IPl)in 1 tab i want such 2or more to look in in order to go to the page by clicking but the pages which i create in blogger i had to publish it as i cannot hide it all comes together in a row whereas it looks unsystematic after using your content too and i cannot keep in draft too as linkinking cant be done from there.

    Hope for reply sir.
    My blog:- http://sportzgravity.blogspot.in/

    ReplyDelete
  166. Submenu Tree provides a method for structuring content hierarchically. For content, which has a menu link, Submenu Tree displays a list of content, which is at the same level or below the content in the menu.



    http://www.handycss.com/css-menus/creating-menu-with-sub-menu-below/

    ReplyDelete
  167. Hi sir

    copy exactly the code but the drop down submenu does't work.
    please help!

    http://logospublications.blogspot.com/#

    ReplyDelete
  168. Thank you, css code & html code work in my blog.

    ReplyDelete
  169. Mohammad,
    Thanks so much for the code, this is exactly what I was looking to add to my blog.

    I do have one small issue however, if you have the time would you mind taking a look at my page's dropdown bar and look at the an unattractive page break that exists on the drop down menu items:
    "The Dental Admissions Test" and "Dental School"?

    Everything else is perfect except that one small issue.

    Again, Thanks for the code!

    Best,
    Jon

    ReplyDelete
  170. THANKS MOHAMAD FOR THIS AWESOME ENTRY

    ReplyDelete
  171. Hi Mohammad,

    Thank you for the help! However, I can't seem to center my navigation bar. I tried the other tricks mentioned above but I've had no luck. http://peacewithinyoga.blogspot.com

    Any help is appreciated!

    ReplyDelete
  172. HELLO SIR ,
    I NEED U R HELP TO BUILT A CODE FOR DROP DOWN MENU TO MY BLOG WWW.VECLIBRAARY.CO.CC ,PLZ VISIT THIS AND MAKE A CODE FOR DROPDOWN MENU AS SHOW IN BELLOW PAGES GADGET .INCLUDING SIZE COLOUR.PLZ MAIL ME TO SIVASANKARNAIDU777@GMAIL.COM

    ReplyDelete
  173. Hi Mohamed,
    Thank you so much for this post, i followed the steps and the menu looks awesome :) however, i dont really know how to link my archived posts to the dropdown menu my website is www.mystylemewz.com can you pls take a look and advise

    BR
    Marwa

    ReplyDelete
  174. hey dude i hav read ur posts that are very musch useful but wanna ask u something that www.mobilefun12.blogspot.com is my blog and i wanaa know tha how to categorize each post in a drop down menu bar ??????

    ReplyDelete
  175. Very good job done! tried some other ones - they didn`t work.

    Thx for your version, got absolutely no problems when installing it.

    watch on www.hotnewsblog.net

    best wishes from munich,

    wolfgang

    ReplyDelete
  176. hi, i just used your instructions to make my own drop down menu! thanks so much!
    but i only have one problem: i cannot click on the drop-downs, only sometimes. what can i do to get rid of the problem?
    thanks so much in advance!

    ReplyDelete
  177. I cant change the bacground [#mbtnavbar {
    background: #544e15; ]. Its not working

    ReplyDelete
  178. bro , i have faced some problem to do it ....
    if u check my site mgbsdc.blogspot.com u will find that ......if u can help me ..

    regards sabir

    ReplyDelete
  179. Hi,
    My blog is http://reviews-bh.blogspot.com/
    I just created my drop down menu and I put it on the header of the page. However, when it's there, the subpages don't appear if I hover over the tabs. The subpages appear if I move the menu to the top of one of the columns but I want it at the top of the page. Please help!

    ReplyDelete
  180. This is my first time here and I love it. nice work.

    ReplyDelete
  181. Hello, i love very much this post,...already have applied the dropdown menus to my blog....thanks alot

    PLEASE HELP!!
    >>I need help about the dropdown menus settings or formmating, i am trying to make a drop down menu of only 2 levels, the first drop down menu worked very fine, but the second and the next dropdown menus sets 3 level dropdown menus, and it wont do the same as of the first one which is good,...Admins, please help me set my dropdown menus to only two please,,,thanks i advance :)

    my blog is
    joshua121595.blogspot.com, the dropdown menus there are the ones i liked and set....hope to fix it soon :)

    ReplyDelete
  182. Hi,

    Firstly I would like to give you applause for this useful code. Thank you very much. :)

    Secondly, I have a problem applying this code on my blog http://egobisa.blogspot.com

    When I'm in home page, I can see the sub-menu when the cursor on the top-level menu, but when I move the cursor on the sub-menu, the sub-menu disappear immediately, so I can't access the sub menu, but when I'm in other page (except home page) I can access the sub menu.

    Can you give me the explanation of this issue? Thank you very much.
    Assalamu'alaikum. :)

    ReplyDelete
  183. it is not working on my blog..i am able to see all the pages of the drop down, please help

    ReplyDelete
  184. Hello, thank you so much for the tutorial! I love the drop downs. I have two questions though.

    1.) How can I get ride of the gap between the header (which is a picture) and the drop down
    2.) On EI the drop downs will not work. To me this is minor because I feel that no one uses EI anymore.

    You can check out my blog here: www.MusicTechHumorLife.com

    Thank you very Much

    Mike

    ReplyDelete
  185. hi,
    it work succesfuly bt there is a problem how to put it into main page bar it is only in widget ,

    itinformar.blogspot.com

    ReplyDelete
  186. http://learninformatique.blogspot.com

    ReplyDelete
  187. hey it worked perfectly but in my drop down menus the rectangular boxes are not of sufficient size so my entire text is not being displayed without hovering. which part of the css code should i edit for this?

    ReplyDelete
  188. i will try it to my blog.. :) www.unseenbeautyofnature.com

    ReplyDelete
  189. HI…
    I would like to know how do I make to direct the menus and submenus for diverse pages in web…
    Example.
    Menu 1 - www.sapo.pt
    Menu 2 - www.iol.pt
    *Submenu1 - www.facebook.pt

    ReplyDelete
  190. This comment has been removed by the author.

    ReplyDelete
  191. Mr Mohammad,

    Thanks a lot for your great help. I am pleased. It was very easy and time saving tips. Just took 10-15 minutes to get as my desired design. Again thanks.

    ReplyDelete
  192. Used this on my blog, fully customized it to suit my preferences. Works a charm!
    Took a long time to find this, took no time at all to install and tweak it.
    Thank you!

    ReplyDelete
  193. 2º Try....

    HI…
    I would like to know how do I make to direct the menus and submenus for diverse pages in web…
    Example.
    Menu 1 - www.sapo.pt
    Menu 2 - www.iol.pt
    *Submenu1 - www.facebook.pt

    ReplyDelete
  194. 2º Try....

    HI…
    I would like to know how do I make to direct the menus and submenus for diverse pages in web…
    Example.
    Menu 1 - www.sapo.pt
    Menu 2 - www.iol.pt
    *Submenu1 - www.facebook.pt

    ReplyDelete
  195. 3º a charme....

    HI…
    I would like to know how do I make to direct the menus and submenus for diverse pages in web…
    Example.
    Menu 1 - www.sapo.pt
    Menu 2 - www.iol.pt
    *Submenu1 - www.facebook.pt

    ReplyDelete

Support Us

We have educated thousands of bloggers online and made several people Make a living Online. If our Tutorials have really helped you a little, then kindly show your love by using the badge below:-

Blogger Widgets

or try a Beautiful Banner

Widgets

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!

About The Author

Hi! I am Mohammad, a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. STC Network was founded in 2008 and it is currently the country's first registered company of Professional Bloggers. Read More..

Recipes

SEO Affiliate Marketing Social Media

Make Money Online Web hosting

Blogging Tips Web Designing

Plugins and Widgets Blogging Ethics

Subscribe

Recent Comments

Popular Series

Powered by:

My Blogger Tricks © 2013. All Rights Reserved | Contact |