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.

Need Quick Help within 24 Hours? ASK NOW



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 »

262 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. @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
  3. @MEG

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

    ReplyDelete
  4. 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
  5. This comment has been removed by the author.

    ReplyDelete
  6. @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
  7. 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
  8. @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
  9. 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
  10. 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
  11. 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
  12. 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
    Replies
    1. Hi Alex,

      How do fix it? I have been trying many many time, and it still dont work. Please help.

      My blog is
      http://vietfoodblogger.blogspot.com

      Thanks

      Delete
  13. 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
  14. 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
  15. @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
  16. @Mohammad Mustafa Ahmedzai

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

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

    ReplyDelete
  18. 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
  19. 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
  20. hi may i know how to center the alignment for the menubar?

    ReplyDelete
  21. @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
  22. can u tell me what to write in page links

    ReplyDelete
  23. 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
  24. THanks! It works fine. thats what am using now on my blog www.deluxetrick.blogspot.com

    ReplyDelete
  25. 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
  26. Thank you SOOO much! I've tried 5 different tutorials and finally, this one works! Yay!

    ReplyDelete
  27. 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
  28. very good topic.........!!!!!


    It solve my problem.

    TFS

    i'll share it.

    ReplyDelete
  29. 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
  30. thanks a lot dude..its works great..

    ReplyDelete
  31. 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
  32. 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
  33. Fabulously simple to follow!!! Thank you, this was exactly what I was looking for!

    ReplyDelete
  34. 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
  35. 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
  36. 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
  37. 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
  38. bro mere kaam nai kar raha eh method

    ReplyDelete
  39. 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
  40. 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
  41. HI, WHY I COULDN'T PUT THE MOUSE ON THE NEXT PAGES OF DROP DOWN MENU. THANKS

    ReplyDelete
  42. 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
  43. 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
  44. 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
  45. 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
  46. 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
  47. Still wondering if anyone has been experiencing same problem as above using this menu in Internet Explorer?

    Keith

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

    ReplyDelete
  49. 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
  50. friends koye mujy bataya ga menu may posting kasay karni hay?

    ReplyDelete
  51. 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
  52. 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
  53. 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
  54. 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
  55. can i have multiple dropdown with this script

    ReplyDelete
  56. 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
  57. 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
  58. I really like your site. Thank you for sharing your knowlegde :) peace

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

    ReplyDelete
  60. 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
  61. 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
  62. 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
  63. 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
  64. should i specify my head with navbar or can i use that code mtbnav directly?

    ReplyDelete
  65. 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
  66. 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
  67. 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
  68. 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
  69. 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
  70. 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
  71. I Replaced # with my site links...But its not navigating to those link :(

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

    ReplyDelete
  73. 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
  74. I have some problem with this..

    please help me..

    ReplyDelete
  75. @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
  76. 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
  77. 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
  78. 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
  79. 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
  80. almost forgot. my blog adress is www.testingmenu.blogspot.com

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

    ReplyDelete
  82. 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
  83. 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
  84. 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
  85. 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
  86. 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
  87. 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
  88. 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
  89. Very nice. i get information for my blog. visit back to my blog.

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

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

    ReplyDelete
  92. 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
  93. it works like a charm! thanks for this info!
    Check it out: http://blurredfaqs.blogspot.com/

    ReplyDelete
  94. 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
  95. Ain't working - no submenu shows

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

    ReplyDelete
  97. 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
  98. @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
  99. how to do send my my navigation links to another website, outside of my blog?

    ReplyDelete
  100. 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
  101. 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
  102. I have some problem with it..

    ReplyDelete
  103. 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
  104. 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
  105. Just one word sir..... Thank you....

    ReplyDelete
  106. 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
  107. I MA NOT GETTING THE ABOVE MENU BAR IN THE MIDDLE.....PLEASE DO TELL.MY BLOG IS http://tecsac.blogspot.in/

    ReplyDelete
  108. 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
  109. 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
  110. @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
  111. 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
  112. 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
  113. @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
  114. @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
  115. 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
  116. 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
  117. 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
  118. 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
  119. 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
  120. 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
  121. 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
  122. Hi sir

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

    http://logospublications.blogspot.com/#

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

    ReplyDelete
  124. 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
  125. THANKS MOHAMAD FOR THIS AWESOME ENTRY

    ReplyDelete
  126. 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
  127. 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
  128. 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
  129. 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
  130. 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
  131. I cant change the bacground [#mbtnavbar {
    background: #544e15; ]. Its not working

    ReplyDelete
  132. 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
  133. 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
  134. This is my first time here and I love it. nice work.

    ReplyDelete
  135. 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
  136. 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
  137. it is not working on my blog..i am able to see all the pages of the drop down, please help

    ReplyDelete
  138. 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
  139. 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
  140. 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
  141. 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
  142. 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
  143. I have some problem with this..

    please help me..
    i cant add drop down menu
    cheak this blog
    www.solutionpointh2z.blogspot.com

    ReplyDelete
  144. Can I add another submenu to the current submenu I have? Like a sub-submenu like this;

    Menu
    Submenu 1
    Submenu 1a

    How do I go about doing that?

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

    ReplyDelete
  146. :) im so happy to find your blog, thanks a lot.... keep it up

    ReplyDelete
  147. Hi Mohammad,
    I have this blog http://pritikansara.blogspot.in
    I have a right-side menu, and many pages how do i use this code for right side menu?
    -Priti

    ReplyDelete
  148. Hey, could use some help with my menu. For whatever reason, if I place it down below my blog posts, the drop down menu works. If I have it above the posts (where I want it), it doesn't drop down. Can you help? Thanks in advance!

    http://www.kettlebelltherapy.com

    ReplyDelete
  149. hey bro i add this menu on my blog but its not working . the drop down menu is apear for only one time when the blog is open . the second time it will be dissapear

    can you please help me how it can be familiar with my blog

    my test blog is http://sky7010.blogspot.in/

    kindly reply bro

    ReplyDelete
  150. I do it as following instruction but the drop down menu in my blog is not work. Could explain me a bit more detail?
    my Email: pirathset@gmail.com
    my blog: www.pirath-thanh.blogspot.com

    ReplyDelete
  151. Mashallah great post but when I try to add the menu it covers the orginal navigation bar cant i just add the drop down list to the origin nav bar

    ReplyDelete
  152. Hello;

    So I used this entire code on a demo blog I am designing http://tutusandtrikesdb.blogspot.com.au/ and unfortunately the drop down menu won't work. I just quickly input the information in for lifestyle [so that is the one that should drop down] but it isn't working.

    Any ideas?

    Thanks,

    Carly

    ReplyDelete
  153. This was so easy to follow and customize. Thank you!

    I have one problem though, my drop down menu often disappears when I hover over it. Not all the time, but most of the time. Any suggestions?

    ReplyDelete
  154. thank you for sharing your knowledge. I appreciate you.

    More Power!

    ReplyDelete
  155. thank you for sharing your knowledge. I appreciate you.

    More Power!

    ReplyDelete
  156. Great thanks, this is exactly what I was looking for, cheers.

    ReplyDelete
  157. Worked like a charm on my blog http://websitebooster.blogspot.in

    Earlier I was not sure how I have to do it. I was using WordPress previously where subpages are inbuild. Blogger should also implement same functionality.

    Thanks again.

    ReplyDelete
  158. Hi,

    First of all I would like to thank you for such a great add on to my blog. I tried this widget in my blog but I'm having some problems. These are:

    1. Color of the first block in navigation bar is having low density as compared to other block lines (in blue)
    2. As I place the mouse over a tab, the text becomes white.
    3. As I place the mouse on my drop down link, it does not always show the drop down list.

    My blog address is http://pimanpower.com. Please see and suggest how can I correct it.

    ReplyDelete
  159. Thanks
    My site ( http://nethelp24.blogspot.com )

    ReplyDelete
  160. very usefull topic and thank's for sharing, i'll try this to my blog

    ReplyDelete
  161. how do you add content under the sub-pages

    ReplyDelete
  162. Hello my name is Patrick and I'm from Ecuador, I need your help urgently. this is the Directorate for my blog: probarproductosencasa.blogspot.com.
    The problem is this: When I open the chrome browser BEGINS normally like mozilla. but when I open internet explorer I get the menu below the post and I get really bad. I need your help to set it right. Is urgently await your response immediately send me to this email address: ayudadeblogger@gmail.com
    I hope you understand me because I do not speak very good English.
    Greetings.

    ReplyDelete
  163. Hi! I tried the code but it didn't work. The drop down is not is not showing or working. Help please, here is my blog onlyyahj.blogspot.com. Thanks! c:

    ReplyDelete
  164. Hullo,
    I have added the code for menus on my blog but it does not bring the drop down. The blog is http://traveltoeastafrica.blogspot.com

    Any help?
    Thanks

    ReplyDelete
  165. Hi! :) I have a question.. I created a drop down menu for my blog http://yolandaas.blogspot.co.uk.. If you visit my blog it's at the far bottom of my page (I left it there for when I was editing it).. It looks fine there. But when I place it below my header where it's meant to be- it looks completely different and doesn't work at all!! Any help? x

    ReplyDelete
  166. perfect perfect... but now...i need help... i have created two verticle tabs sections the 1st one which I'd like to put above my header if I could(???) and the 2nd one I'd like to center (???) but my main issue is when I mouse over the 2nd section the tabs are cut off right under them and you cant see them ? please help, im very new to this
    www.uniquedesignsandfinds.com
    email me if you can meg_jones25@hotmail.com

    ReplyDelete
  167. Nice Post and a very good help.

    Friend I need to create "Internal Links" like in one of the blog... https://indiantruckers.wordpress.com/

    Have a look at the "categories" section.

    I tried creating the Menu but cant really take it to full advantage.

    My Blog - http://www.highwaysmastered.com/

    Pls Help.

    ReplyDelete
  168. I need help with my menu- they don't drop down past the widget box???

    ReplyDelete
  169. Please tell me that how to add links in drop down menu.i know that one should post his/her links instead of " # " but i don't know that what links should i add there.Please guide me.thanks.

    ReplyDelete
  170. hello,

    i've constructed and formated my drop down menu in my blog...
    it works fine with mozzila, chrome & safari browsers, but there seems to be a problem with internet explorer...
    the drop down menus seems to be overlapped by the blogs center and side columns and therefore do not work as they should...
    you can see what i am talking about here www.archstudies.gr (i hope that doesn't mean spam)
    does anybody know how i can fix this problem?

    thanx in advance,
    michael

    ReplyDelete
  171. Please help me remove the obnoxious lines inbetween each page. Otherwise, works great, I REALLY appreciate it, I've been looking for something like this for a while now.
    God bless,
    Emily

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

    ReplyDelete
  173. hi...
    Everything on my blog worked fine through this tutorial but I can't get it to stretch the entire length of my header and change the background of the mbtnavbar..

    could you help me on this?

    my blog is http://onlinefreewares.blogspot.com/

    ReplyDelete
  174. For some reason it only shows sub page #1 and the other two won't show up. please take a look http://esterdsd.blogspot.ca/

    ReplyDelete
  175. Hey Mohammad, i have a question. I want to add Drop Menu to my blog, but i don't want to change my menu, i want that it's stays the same.
    Watch my blog http://realmadrid-bosnia.blogspot.com/

    I just want to add drop menu, don't want to change font, size or anything. Can you help me? I

    ReplyDelete
  176. @Anunimi

    yes I have this problem too - only on IE. Would love a solution....

    ReplyDelete
  177. thanks for you great menus (y)
    movieztheatre.blogspot.com

    ReplyDelete
  178. I have used your drop down menu for a long time now and it wroked perfectly. However I have just updated the design of my blog, using an external template. As this template has got some kind of coding for a menu (not a drop down menu though), your drop down menu doesn't seem to be working anymore. Any idea why that might be and how I can get around that issue please? This is my blog: www.tammyandchrisonthemove.blogspot.com

    ReplyDelete
  179. @K-planet
    im having this same problem! please help! :)

    ReplyDelete
  180. Thank you so much for this code. The nav bar covers up the bottom of my header. I have solved this before with other nav bar templates by adding padding-top:50px to the nav bar but I can't seem to find the right place to put it in your code. Tried everything that seemed logical but it had no effect. Can you tell me where to put it, or offer some other solution to lower the nav bar below header? http://tonimtestblog.blogspot.com/ You can see the bottom of the photo is cut off; in the real blog there will be some text in the area that right now looks blank and it will be cut off too because it come down to bottom of photo.

    I also want to round the upper corners of the nav bar but again, couldn't find the right place to put that code (the radius stuff) or maybe I don't have the code right - I'm still a novice at this.

    Final question: there is a faint dotted line over the tabs and I don't know how that got there. ??????

    I hope this is not too much of an imposition to ask you three questions!

    ReplyDelete
  181. Thanks! It worked for my blog!

    ReplyDelete
  182. hi,
    did create drop down menu in my blog but the optionns in the menu hides behind the post. please help

    ReplyDelete
  183. Now i want to remove this how : www.tricksfound.blogspot.in

    ReplyDelete
  184. I posted this on my blog www.davidsmommy.com and am having issues with it dropping them all down...

    ReplyDelete
  185. Hello Sir, I recently add this horizontal dropdown menu bar to my blog. and it also worked fine on Firefox and Chrome. but it did not worked properly on internet explorer. I request you Sir, pls help me to solve this problem. my blogs address is http://www.technovishwa.blogspot.in/

    ReplyDelete
  186. Hi, I have a question, after did some alteration, there is a problem which is a gap between the menu and submenu..as a result, its hard to go to the submenu since when i try to point the cursor to it, it starts to disappear, mind if you give a solution? the blog is http://alumnismkaslimriver.blogspot.com/

    Thank you

    ReplyDelete
  187. Hai bro, my dropdown-menu-quickly -disappears-when-mouse-moves-over-the-drop-down-list. Can you solve it?

    ReplyDelete
  188. Hi,

    How do you add spacing between each of the pages in the nav bar? They are all crammed together on the left and I would like them evenly distributed across the page.

    Thank you!

    ReplyDelete
  189. I already like the design of the pages menu in my current blogger theme can i just add a drop down menu for the current menu? If so how?

    ReplyDelete
  190. hey sir can u please help me, my dropdown doesnt show in front. please. thanks

    ReplyDelete
  191. Hi

    I follow the instruction and get the drop diwn list. The problem I have is when I move cursor the drop down list appear in 1 second then about the time I move my mouse down the list to select a link in the drop down menu, it disappears. Please help. My blog is

    http://vietfoodblogger.blogspot.com

    Thanks
    April Tran

    ReplyDelete
  192. @FROID

    Search for following
    and change overflow from "hidden" to "show".
    Your problem solved.

    /* Tabs
    ----------------------------------------------- */
    .tabs-outer {
    overflow: hidden;
    position: relative;
    background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
    }

    #layout .tabs-outer {
    overflow: visible;
    }

    .tabs-cap-top, .tabs-cap-bottom {
    position: absolute;
    width: 100%;

    border-top: 1px solid $(tabs.border.color);

    }

    .tabs-cap-bottom {
    bottom: 0;
    }

    .tabs-inner .widget li a {
    display: inline-block;

    margin: 0;
    padding: .6em 1.5em;

    font: $(tabs.font);
    color: $(tabs.text.color);

    border-top: 1px solid $(tabs.border.color);
    border-bottom: 1px solid $(tabs.border.color);
    border-$startSide: 1px solid $(tabs.border.color);

    height: 16px;
    line-height: 16px;
    }

    .tabs-inner .widget li:last-child a {
    border-$endSide: 1px solid $(tabs.border.color);
    }

    .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
    background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
    color: $(tabs.selected.text.color);
    }

    /* Headings
    ----------------------------------------------- */
    h2 {
    font: $(widget.title.font);
    color: $(widget.title.text.color);
    }

    /* Widgets
    ----------------------------------------------- */
    .main-inner .section {
    margin: 0 27px;
    padding: 0;
    }

    .main-inner .column-left-outer,
    .main-inner .column-right-outer {
    margin-top: $(widget.outer.margin.top);
    }

    #layout .main-inner .column-left-outer,
    #layout .main-inner .column-right-outer {
    margin-top: 0;
    }

    .main-inner .column-left-inner,
    .main-inner .column-right-inner {
    background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat 0 0;

    -moz-box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);
    -goog-ms-box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);
    box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);

    ReplyDelete