RealcomBiz
Pin It

Create a Simple Drop Down Menu In Blogger Blog

Adding drop down menu to your blog is the best way to arrange your blog/site important links, it will helps your readers to easily navigate through your blog which will definitely increase your site page views and impression.
This drop down menu comprises of CSS and html and it doesn't affect your blog load time. In my previous post, i have discuss on some cool drop down menu like how to add CSS3 drop down menucreate awesome CSS3 drop down menu and there is still lot's more on the way.





How To Add The Drop Down Menu

STEP 1
  • Go to your blogger dashboard
  • Click on "Design" > "Edit HTML" back up your template
  • Use ctrl F to find ]]></b:skin> and paste the following code above/before it
/*----- Drop Down Menu BY www.realcombiz.com----*/

#rbnavbar {
    background: #2a2626;
    width: 100%;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #7f7777;
        height:35px;
}

#rbnav {
    margin: 0;
    padding: 0;
}
#rbnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#rbnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:35px;
}
#rbnav li a, #rbnav li a:link, #rbnav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
      
}
#rbnav li a:hover, #rbnav li a:active {
    background: #6c6464;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
      
  
      
}
#rbnav li {
    float: left;
    padding: 0;
}
#rbnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#rbnav li ul a {
    width: 140px;
}
#rbnav li ul ul {
    margin: -25px 0 0 161px;
}
#rbnav li:hover ul ul, #rbnav li:hover ul ul ul, #rbnav li.sfhover ul ul, #rbnav li.sfhover ul ul ul {
    left: -999em;
}
#rbnav li:hover ul, #rbnav li li:hover ul, #rbnav li li li:hover ul, #rbnav li.sfhover ul, #rbnav li li.sfhover ul, #rbnav li li li.sfhover ul {
    left: auto;
}
#rbnav li:hover, #rbnav li.sfhover {
    position: static;
}
#rbnav li li a, #rbnav li li a:link, #rbnav li li a:visited {
    background: #6c6464;
    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;
  
}
#rbnav li li a:hover, #rbnavli li a:active {
    background: #2a2626;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}
  • To change the color of your background menu, simply edit #2a2626
  • To change the background color of the menu on mouse hover, then edit #6c6464
  • To change the background color of the drop down menu, edit #6c6464
  • Click "SAVE TEMPLATE" when you are done with your editing

STEP 2

Now we are need to add the html code
  • Go to "Page Elements", click "Add a Gadget" below your header
  • Choose "HTML/JavaScript" from the list of the options and paste the following code in the content box leaving the title blank
<div id='rbnavbar'>
      <ul id='rbnav'>
        <li>
          <a href='#'>Home</a>
        </li>
        <li>
          <a href='#'>Contact</a>
       </li>
        <li>
          <a href='#'>About</a>
       </li>
        <li>
          <a href='#'>Blogging</a>
        </li>
  <li>
           <a href='#'>Services</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>
                <li><a href='#'>Sub Page #4</a></li>
                <li><a href='#'>Sub Page #5</a></li>
              </ul>
        </li>
         <li>
          <a href='#'>Create This ></a>
        </li>
      </ul>
    </div>
  • Replace all occurrence of # with the link/url of each page you want to point the menu to
  • Replace all text highlighted in green      with the title of each menu
  • Click "Save" and if you need any further help, please feel free to ask using the comment box, and we will get back to you asap.
Note: If you observed that your submenu (Sub Page) is hidden, kindly read this:
 
Hope you enjoy this articles? take few seconds to share it and subscribe for our latest posts update.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

82 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. Saidwali Momal Khan · Works at Ufone
    thanks dear its very nice post.
    i don't know how to thanks you>>.
    nice very nice.

    ReplyDelete
  2. it didn't work for me??
    please see my page?

    ReplyDelete
    Replies
    1. If you followed the tutorial carefully as explained above, it should work perfectly well, restore your back and try it again. Let me know if the problem still persist.

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

      Delete
  3. Thank you for your instruction & ttutorial. But my drop down was hiding behind the menu. I can see after change the height. Then, how to change the width of each menu item.
    Please kindly advise me how to do. Thank you.

    ReplyDelete
    Replies
    1. Try to read and apply this www.realcombiz.com/2012/07/how-to-add-drop-down-menu-in-new.html feel free to notify me if you still encounter any problem and am very sorry for the late reply.

      Delete
  4. It works very nice, but the submenues are hidden behind blog posts or other gadgets... I would greatly appreciate a solution :)

    ReplyDelete
    Replies
    1. Read and apply this www.realcombiz.com/2012/07/how-to-add-drop-down-menu-in-new.html. feel free to notify me if you still encounter any problem.

      Delete
  5. Is there a way to center it instead of it being on the left?

    ReplyDelete
    Replies
    1. look for this code in the CSS code above
      #rbnavbar {
      background: #2a2626;
      width: 100%;
      color: #FFF;
      margin: 0;
      padding: 0;
      position: relative;
      border-top:0px solid #7f7777;
      height:35px;

      margin: 0; is use to position the whole body of the menu.
      Now replace it with margin: -1px -2px -3px -4px;
      1px is the margin from left
      2px is the margin from top
      3px is the margin from bottom
      4px is the margin from right.
      Keep adjusting it till you get the perfect positioning of the widget for your blog.
      Feel free to ask if you need any further help.

      Delete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Thank you so much! I've been looking for this for a long time!

    ReplyDelete
  8. Thanks for this tutorial. I'm trying to make it centred with the code you gave above but it's not working. No matter how big or small I make the numbers, it doesn't make a difference. Also, how do you remove the borders?

    ReplyDelete
    Replies
    1. 1. concerning the positioning
      read my reply to Pretty Lady comment.

      2. For the border removal, find the following code in the CSS code i shared

      #rbnav li {
      list-style: none;
      margin: 0;
      padding: 0;
      border-left:1px solid #333;
      border-right:1px solid #333;
      height:35px;

      Now change 1px to 0px as shown below

      #rbnav li {
      list-style: none;
      margin: 0;
      padding: 0;
      border-left:0px solid #333;
      border-right:0px solid #333;
      height:35px;

      Delete
  9. Well this is the way to guide and i got all your points just watching your article. It is easy and well balance writing accoding to information technology news sitesthe topic. I really like your work. Thank you for the post.

    ReplyDelete
  10. it is working ...........
    i am apply for my blog.

    ReplyDelete
  11. good posting bro, i like this and very nice article, i will try it, thanks....

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

    ReplyDelete
  13. Visits night bro, I want to create a blog advertising and I'm still confused as to what a model template? If you can create a blog writing about advertising complete with sample templates and script, if I may please send to my email boygolden9@gmail.com, I definitely would love to, thank you very much in advance.

    ReplyDelete
  14. Great Post. iwas searching for it long time............ now i am unable to get it. again thanx
    Guide Pedia

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

    ReplyDelete
    Replies
    1. Replace the HTML code (second code) with the following:

      <div id='rbnavbar'>
      <ul id='rbnav'>
      <li>
      <a href='#'>Home</a>
      </li>
      <li>
      <a href='#'>Contact</a>
      </li>
      <li>
      <a href='#'>About</a>
      </li>
      <li>
      <a href='#'>Blogging</a>
      </li>
      <li>
      <a href='#'>Services</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>
      <li><a href='#'>Sub Page #4</a>
      <ul id='sub-subnav'>
      <li><a href='#'>Sub-sub Page #1</a></li>
      <li><a href='#'>Sub-sub Page #2</a></li>
      <li><a href='#'>Sub-sub Page #3</a></li>
      <li><a href='#'>Sub-sub Page #4</a></li>
      </ul>

      <li><a href='#'>Sub Page #5</a></li>
      </ul>
      </li>
      <li>
      <a href='#'>Create This ></a>
      </li>
      </ul>
      </div>

      Now add code below to the CSS code (First code)

      #sub-subnav li {
      list-style: none;
      margin: -16px;
      padding: 0;
      height: 67px;
      border-right: 0;
      border-left: 0;
      }

      If you look at the HTML code carefully, you should understand how the Sub-sub menu is formed, the bold HTML text represent the Sub-sub menu. Try to use our HTML Editor for better customization. Let me know if you need any further help.

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

      Delete
    3. Please who have tried this Sub-sub Page level drop down... did it work? i have ben trying it but no way out.. please i need assistance. thanks in advance.

      Delete
  16. Hi, ive add this menu on my page suchaszosa.blogspot.com and it looks great. But I have one problem: submenu categories are hiding, every time I try to slide the cursor down and point one of them. Can you help me to fix it?

    ReplyDelete
    Replies
    1. I'm having the same issue as others. I'm technically savvy and understand Javascript, HTML, CSS, etc. so feel free to point me based on that. I have read the other post that essentially commented out the Tabs section from the template and have done so. Prior to doing that I got no drop down menu's at all. Now with that section commented out I get the drop down menu, but only the first one which is above the blog section below it. It appears all others are hidden behind that next section. Also note that the Tabs section in your post is not exactly the same as the one in mine, not sure if that matters or not. Here is the Tabs section in my template (which is commented out as you can see per your direction):

      /* 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);
      }

      */

      Delete
  17. Replies
    1. Look for this line in the CSS code above

      #rbnav li a, #rbnav li a:link, #rbnav li a:visited {
      color: #FFF;
      display: block;
      font:normal 12px Helvetica, sans-serif; margin: 0;
      padding: 9px 12px 10px 12px;
      text-decoration: none;

      Change the bolded text.

      Delete
  18. My drop down does not work, i have tried other peoples template which all seem to have the same method and always the sub menus just line up below.

    ReplyDelete
  19. Hi, I've followed your tutorial and applied the menu, it works except the submenu. When the mouse hovers the menu, it shows the submenu, but then every time i slide the cursor down and point one of them, the whole submenu categories are hiding!

    my blog is paintershan.blogspot.com, may you take a look and give me some advice? Thank you!

    ReplyDelete
  20. btw, I've followed your tutorial "www.realcombiz.com/2012/07/how-to-add-drop-down-menu-in-new.html" and moved the "*/" at the bottom of *Tabs. But still can't solve the problem. Please give me some advice, thank you very much!

    ReplyDelete
    Replies
    1. Remove margin: -3Opx; from the CSS code that you use and see what happen.

      Delete
  21. This is something small but is irritating me. The top line of my tabs is thicker than the bottom. Unsure how to correct it, have tried everything. URL is mys-fit.blogspot.com.au - any help would be appreciated!

    ReplyDelete
    Replies
    1. I worked it out, sorry to bother you. :)

      Delete
    2. No problem Jayne. Glad that you worked it out :)

      Delete
  22. Hello,

    I was just wondering whether you can make the hover color for the text only rather than the a color surrounding the text like a border?

    ReplyDelete
    Replies
    1. Look for the following lines in the CSS code above.

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

      background: #6c6464; represent the background color on hover.

      color:#FFF; represent the text-color on mouse hover.

      Make sure the menu background is the same both on hover i.e change #6c6464 to #2a2626.

      For the submenu, look for the following code in the CSS code.

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

      The same process applies to the submenu
      Edit the background: #2a2626; and color: #FFF;

      Delete
  23. Hi, i've a doubt How do you reduce the length of the subpages box.I used one of your HTML code.It looks great but it is too big.If i add more subpages it'll look odd.

    ReplyDelete
  24. Thanks Ridwan, have the margin -30px changed to 0, but the whole menu shift to the right, any advice to fix it? Thank you very much!

    ReplyDelete
    Replies
    1. Now use margin: 1px 2px 3px 4px;

      1px represent margin from top
      2px represent margin from right
      3px represent margin from bottom
      4px represent margin from left

      Keep adjusting the values until you get the perfect positioning. You can also use negative value e.g -1px -2px -3px -4px. But since you said the menu shift to the right, you can adjust the 2px and give it a big value first to see what happens. Change 3px to 0px if you encounter any problem with the submenu.

      Delete
    2. It works!!!! Thank you very much!!!!

      Delete
  25. Very nice menu, thank you bro!
    please leave your suggestions at my site: Bloggerjin
    Thank you

    ReplyDelete
  26. Thank you for posting this. Great information.

    I am like Shan Lee and having some problems with my submenus. I followed your tutorial "www.realcombiz.com/2012/07/how-to-add-drop-down-menu-in-new.html" and moved the "*/" at the bottom of *Tabs. When I hover over the menu, the submenus appear (and look lovely), but when I go to select one of them, they sometimes disappear.

    The website I'm working on is www.cityofcondon.com. Any advice?

    Thank you!

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

    ReplyDelete
  28. Hey!!!
    I can't change the background colour D:
    But I did followed the tutorial above!
    What should I do? D:

    Check it out on my blog>>
    http://yumuntan.blogspot.com/

    ReplyDelete
    Replies
    1. Hi tan,
      You are to edit background : #262626; in the CSS code. Try to use our Hex color code generator to generate a color. The color will be in this format #000000

      Delete
  29. Nice tutorials bro, it worked for me, just that i still have a question.

    how do u place a google custom search bar on drop down menus such as these...? ive been tryin it but it wasnt doing wat i wanted..Thanks.

    ReplyDelete
    Replies
    1. Paste the Google custom search bar code before the last two closing tags in the HTML code above.

      </li>
      SEARCH BOX CODE HERE
      </ul>
      </div>

      Delete
  30. hi bro!i followed ur tutorial!!i created menu but i am not able to add multiple links of the posts to the same menu please help me!!my blog http://trickkiller.blogspot.com






































































































































    ReplyDelete
    Replies
    1. First, you will need to group your blog post into labels, then add the label link to the menu. So whenever someone click on the menu link, it will display all the posts that are categories under same label.

      Delete
  31. Dear Ridwan .... i had changed Tamplate and its has original drop down menu and other categories but i don't know how to add my labels to that original categories
    Could you please explain me

    ReplyDelete
    Replies
    1. Let me see the HTML code of your navigation menu, so i can tell you how to add multiple labels to it.

      Delete
  32. The background color and text color is the same as my general background of my blog.. when i hover, everything works, any idea what's causing it. you can't see the words at all until you hover.

    ReplyDelete
    Replies
    1. Under #rbnavbar{ tag
      background: #2a2626; represent the background color while
      color: #FFF; represent the text color. Edit these two values with your prefered hex color code.

      Delete
    2. yes, I have, that's the problem.. doesn't work. the hover elements work, but not the static ones. it will not work on my template for some reason. all the other actions work great.

      Delete
    3. What is the url of the blog you add the drop down menu to?

      Delete
    4. http://sportsbrothersfam.blogspot.com/

      I added it back, so you can see..

      Delete
  33. I can't find ]]> on blogger template editor please help me to find as now the the blogger template editor has changed

    ReplyDelete
    Replies
    1. You can copy and paste your template code inside Notepad, find the code, make the changes and paste it back into your template editor.

      Delete
  34. awesome!
    I am happy with my menu now. :D
    Check it out! I am using simple blogger template
    http://thirtythree80.blogspot.co.nz/

    ReplyDelete
  35. all new link open in same tab , how we change this !!
    thanks in advance

    ReplyDelete
  36. Thanks for posting this. I've used it on multiple sites now. One thing I'm having trouble with is how do I change the settings so the menu goes across the full length of my site? (Right now, there's a white gap on the left hand side of the page).

    See here: www.mightyripple.com

    Thanks for your help!

    ReplyDelete
    Replies
    1. Hi Elizabeth,

      You will need to reposition the menu to left. Look for the following line in the code above.

      #rbnavbar {
      background: #2a2626;
      width: 100%;
      color: #FFF;
      margin: 0px;
      padding: 0;
      position: relative;
      border-top:0px solid #7f7777;
      height:35px;
      }

      Now, replace margin: 0xp; with margin-left: -30px;

      Example:

      #rbnavbar {
      background: #2a2626;
      width: 100%;
      color: #FFF;
      margin-left: -30px;
      padding: 0;
      position: relative;
      border-top:0px solid #7f7777;
      height:35px;
      }

      Keep adjusting the value until you get the perfect positioning.

      Delete
  37. Great drop-down menu. Works like a charm.

    Thank you Durodola. :)

    ReplyDelete
  38. Please i really need your help on this... i created a drop down menu list on my blog using this link http://www.realcombiz.com/2012/07/create-simple-drop-down-menu-in-blogger.html now i want a double level drop down on my blog, plz how can u help me achieve that... Thank You.

    ReplyDelete
    Replies
    1. Read my reply to "Top Tricks and Tips" comment

      Delete
    2. I Read the instruction on some comment above here and it was not successful... plz mail me on what to do exactly. Thanks kaysyxpress@yahoo.com

      Delete
  39. I love this, but I'm wondering if it would be possible to add a second level of menu options. Like I have my horizontal menu and it has 5 options, 1 option drops down to see 3 options, could I somehow add code that would allow one of the 3 options to pop out a menu to the right?

    ReplyDelete
  40. HI..i created a drop down menu list on my blog using this link http://www.realcombiz.com/2012/07/create-simple-drop-down-menu-in-blogger.html, but as soon as i am doing it the upper line i.e. the pages gadget is getting thin... please help... my blog http://shiveshskitchen.blogspot.in/

    ReplyDelete
  41. this is good post...

    i like this...

    please can you visit here..

    http://bantalsilikon01.blogspot.com/
    http://bantalsilikon01.blogspot.com/
    http://bantalsilikon01.blogspot.com/
    http://bantalsilikon01.blogdetik.com/
    http://bantalsilikon01.blogdetik.com/
    http://bantalsilikon01.blogdetik.com/

    http://marinirseo.blogspot.com/2014/03/itupokercom-judi-poker-agen-poker-agen.html
    http://bantalsilikon01.blogspot.com/2014/03/itupokercom-judi-poker-agen-poker-agen.html

    http://marinirseo.blogspot.com/


    tengs very much...

    ReplyDelete
  42. i like it!
    nice post, and permission of bookmark

    ReplyDelete
  43. But my drop down was hiding behind the menu. I can see after change the height. Then, how to change the width of each menu item.Please kindly advise me how to do Ideologi pancasila. Thank you.

    ReplyDelete
  44. I Read the instruction on some comment above here and it was not successful Jersey Indonesia... plz mail me on what to do exactly.

    ReplyDelete
  45. Thanks for posting this. I've used it.
    It is possible to modify this code, for the menus change color automatically when are selected ?

    for example, in:

    http://realcombizlab2.blogspot.com/

    If we select "Archive" or another menu, the menu colour changes and keeps active

    Thanks for the help

    João

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger