How to add a drop down menu to blogger easily



A main feature that's missing in blogger is a drop down menu and although it enables you to use tabs, your still very limited in designing it. A good rule of thumb is to always have a copy of your tempelate before making any changes to it. You can download your tempelate by going to {Design > Edit HTML}. I will show you the easiest step by step instruction for people who have no clue about css or are just beginners. There is a site called pixopoint, and thanks to this website, it lets you to create a drop down in very easy steps and with your own desire!  

Once there, you will be able to customize your drop down menu however you like and its very straight forward. You can use the color code to see which code to use for what color (Don't paste the # sign, just the number). After you've done everything you want to go ahead and choose SUBMIT DESIGN, and you will be given a preview of how your drop down menu will look like.







After submitting your design, you will be given a list of css code at the bottom of the page. This will be the design of your drop down menu. Copy the css code, go to {Design > Edit HTML} and paste the code just before the tag. (Use Ctrl + F and put the code in it so that you will find it faster)

]]></b:skin>

 After pasting your code save your template. Now before actually inserting the HTML for our drop down menu, a neat trick to do is to erase all the css of our tab navigation bar that is put in by the new blogger tempelate. This way when you add your HTML between your header and post, your drop down menu wouldn't be broken and also it will be placed right under the header. In order to do this once again we are going to go (Design > Edit HTML) and search for the tag /* Tabs and then delete everything included inside the tag. Be sure not to delete anything else so that you won't break your blog. 



 




 




Now that that's done, we can begin inserting our HTML so we can actually make the drop down menu work. Go to (Design > Page Elements) and then "Add a Gadget". This is where you enter your basic HTML shown below.
__________________________________________________________________________________

<!--[if lte IE 7]>
<script type="text/javascript" src="http://pixopoint.com/wp-content/plugins/pixopoint-menu/scripts/suckerfish_ie.js"></script>
<![endif]-->
<ul id="suckerfishnav" class="sf-menu">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a>
    <ul>
      <li><a href="#">Sub link 1</a>

             <ul>
                 <li><a href="#">Sub link 1 extended 1</a></li>
                 <li><a href="#">Sub link 1 extended 2</a></li>
             </ul>
      </li>
      <li><a href="#">Sub link 2</a></li>
      <li><a href="#">Sub link 3</a></li>
    </ul>
  </li>
  <li><a href="#">Link 3</a>
    <ul>
      <li><a href="#">Sub link 1</a></li>
      <li><a href="#">Sub link 2</a></li>
      <li><a href="#">Sub link 3</a></li>
      <li><a href="#">Sub link 4</a></li>
      <li><a href="#">Sub link 5</a></li>
    </ul>
  </li>
  <li><a href="#">Link 4</a>
    <ul>
      <li><a href="#">Sub link 1</a></li>
      <li><a href="#">Sub link 2</a></li>
      <li><a href="#">Sub link 3</a></li>
      <li><a href="#">Sub link 4</a></li>
    </ul>
  </li>
</ul>
_________________________________________________________________________________


Once you have added the HTML,you can start editing it to your own desire. the "Link" is the head navigation menu, the "Sub link" will be your drop down menu, and "#" will be the link that you will direct the menu to. However you will notice something wrong with the drop down menu. You will see that your drop down menus either go behind your posts or that you can't hover down with your mouse, and there's a really simple fix to this problem. Go to (Design > HTML) and find the tag that's below #suckerfishnav ul.
(Use Ctrl + F and put the code in it so that you will find it faster)
    position:absolute;


Right after the semicolon of absolute add the following tag
z-index:100;

This tag will make sure that your hover menu will display on top of everything else, but not for internet explorer 7-up! The script before the HTML of our drop down menu actually fixes some more glitches of the drop down menu for IE, but unfortunately some people, the drop down menu will hover behind their source, and the best fix for this is to add the following tag(s) at the end of the HTML  
<br>
and you want to make sure to add a as many as them until the space between your drop down menu and post is as long as your drop down menu, so that it will not hide behind the post.


Another fix you would want to apply in order to get rid of the sticky menus when you hover in IE is to go to (Design > Tempelate Designer > advanced > add css ) and here you will add the following code,
#suckerfishnav li:hover, #suckerfishnav li.hover {
position:static;
}

If you got lost anywhere, please leave a comment and watch my video tutorial. 

60 comments:

  1. Cant get the multi level to work please help

    ReplyDelete
  2. it display different fonts in IE, Please help me

    ReplyDelete
  3. hi, do you know how i could change the font for Arial, round the corners of the navbar to radius 4px, add border/separation between each the main categories and add a search bar inside the nav bar?. Thanks a lot.

    My blog is formulesae.blogspot.com
    email: gabmass@gmail.com

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

    ReplyDelete
  5. Thanks for the tutorial. Really helped a lot. I have a question here. I only want 4 items in main links and i want them to be centered in menu bar instead of aligned to left. Is it possible? thanks in advance.

    ReplyDelete
  6. Could you look at my site and tell me why IE won't put the CSS menu above the ads and content? I've tried everything you said....
    http://www.jw-archive.org/

    ReplyDelete
  7. Can u tell me how to increase the size of the menu bar so that it fits in the complete page coz nw its a bit smaller from both ends !!

    ReplyDelete
  8. Thanks very much for putting this up. Your video was really easy to follow. Make more!

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

    ReplyDelete
  10. how do i align the menu bar to center and stretch it to 100%?

    ReplyDelete
  11. Worked great. Thanks! Now I am lost. How do I get content in to the menu bar categories and the sub-menu categories? Sorry, I am new at this.

    ReplyDelete
  12. yes i got drop down menu but how do i add page in hover link?? please help ! i can't do that...
    like 'album' is my menu stuff so how can i add some page in this 'album' tab??
    see my blog (mineexcercise.blogspot.com...i had done something but it is incomplete. how can i do??

    ReplyDelete
  13. go to my blog and than see once ! you will understand what is my problem. how can i??? mineexcercise.blogspot.com..

    ReplyDelete
  14. I made a Menü for my Blog like you described in your Tutorial, but when I visit it with the Internet Explorer my Menü hides behind my Posts. What do I have to do to fix that? When I visit my Blog with Firefox everything looks ok.

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

    ReplyDelete
  16. Dropdown Menu CSS Generator?

    [Home][stuff]
    ******[Another Level]=>[Next Level]=>[Test]
    ******[Test]***********[Test]********[Test]
    ******[Test]***********[Test]********[Test]
    ******[Test]***********[Test]********[Test]
    ok ??? ??? XD

    youtbue?
    HELP!!

    ReplyDelete
  17. Hi! I followed your steps precisely and for some reason the menu is not showing up. I see a box around where it should be. Any suggestions?

    http://iamjustgirlintheworld.blogspot.com/

    ReplyDelete
  18. Scratch that.. the menu is there, but you have to mouse over to see the links. Suggestions? :o)

    ReplyDelete
  19. Hi, how to put some tags to dropdown menu ?
    So i can push Home and go to the start of my blog.
    Please help !

    ReplyDelete
  20. ok forgive me,Iam only 11 and I am new to blogging and I followed your instructions and got my menu set up. My question is how do I actually post into one of the dropdown tabs I created?

    ReplyDelete
  21. Mine is displaying vertically rather than horizontally. How would I fix that?

    ReplyDelete
  22. Hi, first off your tutorial was awesome, thank you so much! and secondly my drop downs work for my google chrome but when i open it up on internet explorer (after doing everything you said) the drop down menu actually hides behind my posts. could you help me? thank you!!
    www.kpopkrazyyy.blogspot.com

    ReplyDelete
  23. wow what apiece of information thanky you for posting

    ReplyDelete
  24. Good Job

    i did every step as you mentioned here works very well on my blog http://android-tweak.blogspot.in/

    but on IE7+ drop down menu hide behind the post what should i do now

    ReplyDelete
  25. Okay, this is probably a a stupid question but how do I add pages/post to my menus?
    Do I make new 'pages' or new 'posts' and where do I find the links to connect them to my (sub)menus?
    http://effulgentsoul.blogspot.com/

    ReplyDelete
  26. i coudnt access my submenus......plizzzz help me sir. in hitesh7heavens.blogspot.com

    ReplyDelete
  27. Worked great!! Is there anyway to make it to where it will scroll down with my page, so my viewers dont have to scroll all the way back up. Doing a return to top option doesnt work with the type of blog I have.

    ReplyDelete
  28. Friend, Thank you so such!
    2 things,
    very easy to follow you,5 min and done. Cant wait to customize it!
    And Im with Amber just above me, making it static would be awesome.
    Thanks again.

    ReplyDelete
  29. I have a question when in the drop down menu my first one is home when I click it nothing happens. My second one is destinations, and under destinations is Panama city and so on those all work but the home button doesnt what do i do please ?

    ReplyDelete
  30. I tried the whole Internet Explorer thing, but it still hides after my date-header in Blogger.. What can I do to fix this? It works perfectly on each browser, except from internet explorer off course -_-

    This is my blog: http://peachesandmondays.blogspot.be/
    Please send an e-mail to Peachesandmondays@gmail.com

    Thanks.

    ReplyDelete
  31. i do it a you said,it shows link1,link2,etc..but no drop menu..this is only for ie ,ihave mozzilla..

    ReplyDelete
  32. i do it a you said,it shows link1,link2,etc..but no drop menu..this is only for ie ,ihave mozzilla..my mail.pan_me@windowslive.com..please help ..any menu dop doun to work in google blog...

    ReplyDelete
  33. Hi, thanks so much for this! I had tried several other menus but couldn't get them to work in IE --- yours did!
    I've applied it across 4 blogs. The 5th one worked fine, and then today, I'm getting the first several links look & work fine in IE, then it breaks {1/2 of drop downs showing up as bulleted lists below header}. Firefox looks totally fine. I'm not sure where to look or why this one of 5 is misbehaving. Any help is appreciated!

    Blog: http://graphicsfairy.blogspot.com/
    My email: eqmartin@gmail.com

    Same layout and isn't having the same IE issue w/ half the menu: http://www.graphicsfairy-crafts.com/

    Thank you so much!

    ReplyDelete
  34. wow amazing and very good explaned...well done and thanks a lot!

    ReplyDelete
  35. hello, very good work!!

    i did every step as you mentioned here works very well on my blog http://karamanosth.blogspot.com

    but on IE7+ drop down menu hide behind the post. what should i do now?

    ReplyDelete
  36. thankyou for the tutorial...my problem is that the main menu shows but the drop down menu doesnt show even when i hover over it...please help..shirshakjungthapa@gmail.com,
    swoyambhuyatayat.blogspot.com

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

    ReplyDelete
  38. Thank you so much for sharing how to do this!

    The only problem I am having is that I cannot get the code to work so the menue stays down on my blog (http://jaysonjamesbooks.blogspot.com/#)

    I added the code to add CSS:

    #suckerfishnav li:hover, #suckerfishnav li.hover {
    position:static;
    }

    Thanks for your help!

    ReplyDelete
  39. However, I don't know what or how it happened, but whenever I input all the code, two of my tabs started redirecting to other sites. Thankfully, I had a backup copy to restore. Do you know what could have happened?

    ReplyDelete
  40. Thank you.. this is really helpful.. I did it and i'm happy of it now.

    http://artistmyx.blogspot.com/

    ReplyDelete
  41. I have another question, if you don't mind. How can I add a 2nd Level Dropdown for the pages? I tried to use the HTML for the sub link but it didn't work.. what do you think should I do?

    ReplyDelete
  42. really helpful..

    but after i added all menu now i want to add more menu and sub menu in bar.. plz help me how can i add more

    ReplyDelete
    Replies
    1. Hi there, I just added an example of an extended submenu in the html code.
      You can use that technique to add as many submenus as you want.

      Delete
  43. nice post, i want add this to my blog soon.
    thx for tutor :)

    ReplyDelete
  44. Can I make the menus and sub menus to take the leight of the longest line instead of aving to adjust the width of the menus. Sub menus don't show up unless I widen the width of the menus also.

    But everything else works awesome. Thanks

    ReplyDelete
  45. Oh and yes the css for IE does not work either. It works great with other browsers but not IE.

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

    ReplyDelete
  47. www.al-misbaah.blogspot.com

    how do i add more than 1 jump break on a page.
    and please can the administrator of this blog contact me please i need help with my blog!

    ReplyDelete
  48. Hi, This seemed to work great, however the drop down sub menus are not showing up when I view my site and hover over the page tabs . The sub pages are all listed when I view the html code. Can you help?

    ReplyDelete
  49. Hey, great post! It worked almost perfectly for me except that the drop down menu only shows some of my subpages and the others don't show. How can I fix that? I already tried adding as many
    as necessary so that it won't hide behind the post, but it didn't help either.

    ReplyDelete
  50. Thanks I found this to be very help on my blog http://werewolfborn.blogspot.com/ Check it out tell me what you think.

    ReplyDelete
  51. Hi, your blogpost was really helpful.
    But when I try to change the dropdown menu went back of my post..
    I've tried position:absolute; index-z:100;
    But the result is the same
    My link: http://mocchitan.blogspot.com/

    If want to add
    May I ask where should we add?

    ReplyDelete
  52. Thanks, still working on it. your site will not let me copy and paste the codes, is there something i can do?
    thanks

    ReplyDelete
    Replies
    1. I've done that on purpose to encourage everyone to actually write the code out and make sense of it. If you want to actually copy and paste the code for your own convenience, there are numerous other skeletons similar to mine, but for the purpose of this tutorial I deliberately discouraged that.

      Delete
  53. Thanks a lot, this really is a truly awsome article! Unfortunately, I found this article too late - I already found the answer on another service. BTW, if anyone needs to merge PDF/PNG files online, I found a service here Alto-Merge.

    ReplyDelete