Blogger Drop Down Menu


Creating a drop down menu in Blogger can be very difficult. In fact, I’ve been avoiding this tutorial for that very reason. I couldn’t decide what would be the best way to teach it to all of you. It actually got me thinking about my job at the library. My main job at the library is to help students with computer issues they may be having. It’s so much easier for me to simply tell them what they should do to fix it, but most of the time, people want me to get up and show them how to do it. Although I don’t like to do it, people learn better when I show them how to do something.

With that in mind, today’s tutorial is done through…VIDEO. I know, crazy right? I’d like to do more of these in the future, but I get so nervous talking to myself and recording it.


So try not to cringe when you’re listening to the video. I apologize for not having a super cool accent ;)
You can view the video here:




Choose your colors here:

Add Background Color to Main Bar

In the CSS, add this to the #main-navigation:
background: COLOR;

If you want the height of the bar to be greater or smaller, you need to find every instance of 45px in the menu CSS (it shows up 3 times). Increase that 45 number for your bar to be thicker and decrease those numbers for your bar to be skinnier.

Left Aligned Menu

When I originally made this video, I thought it would be more difficult to alter the CSS and make a left aligned menu. After doing some testing, you really only have to remove two lines of CSS.

First scroll to
/* Top menu items */
#centermenu ul

and remove:

Then right below that in #centermenu ul li

Leave a Reply

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

CommentLuv badge

49 thoughts on “Blogger Drop Down Menu

  1. TIS INEVITABLE O_O JK. But.. love that GIF! And I totally get the awkwardness that comes with recording, lol.

    Thanks for the tutorial! Apparently it's back to the drawing board for me. I think this is the last that I want to add… aside from testing out the multiple author bio box and spoiler button. :3

    Although I do have to guess since video is hateful on batteries in wifi areas (I kind of can without clicking play. Yay!). >_<

  2. LOVE this tutorial and I was able to follow along no problems. My question is how do you now get the posts to show up on the pages you created in your drop down menu?

      1. Oh haha, okay. I figured it out. Like for example, when you click on your Tips and Tricks tab, all your Tips and Tricks post show up on that page. I used the wrong link. Instead of using the link you get when you click on the labels, I created an entirely new page. Get it, kinda? It’s sounds kind of confusing :P

          1. Ah I understand now. You want label links in your menu?
            Donya – you know in the footer of your posts there are label links? Just right click on a label link you want in your menu and click “copy link address” Then you can paste that link into your menu and it will show all the posts with that same label =)

    1. In the CSS, add this to the #foxmenucontainer:
      background: COLOR;
      height: 47px;

      I chose 47px because that is the same number for the submenu drop down. If you scroll down in the CSS and see this:
      /* Submenu items */
      #centeredmenu ul ul

      under that you should see
      top: 47px;

      If you want to increase the height of the colored in bar, also increase that height to match =)

  3. Hi Thanks for the great tutorial but i have a lot of troubles yet i followed your tutorial.
    you can look by yourself on my blog! i have a problem with the sub menu they are not normal too much space between letters ! sorry for my english. and i have a problem the bar is on top and sticky but the background is only displaying on half of the bar and i cant see anymore the link home before i put the background i saw the link home. if you can help,i would be so grateful.

    /*Page menu*/
    width: 100%;
    display: block;
    margin: 5px auto;
    position: fixed;
    top: 0;
    left: 20;
    background: black;
    height: 25px;

    /* Main menu settings */
    #centeredmenu {
    z-index:1000; /* This makes the dropdown menus appear above the page content below */

    /* Top menu items */
    #centeredmenu ul {
    overflow: visible;
    #centeredmenu ul li {
    margin:0 0px;
    #centeredmenu ul li a {
    padding:.4em 1em .4em;
    font-weight: normal;
    color: black;
    #centeredmenu ul a {
    color: black;
    #centeredmenu ul li a:hover {
    color: black;
    #centeredmenu ul li:hover a,
    #centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
    color: black;

    /* Submenu items */
    #centeredmenu ul ul {
    display:none; /* Sub menus are hiden by default */
    right:auto; /*resets the right:50% on the parent ul */
    width:20px; /* width of the drop-down menus */
    #centeredmenu ul ul li {
    left:auto; /*resets the left:50% on the parent li */
    margin:5; /* Reset the 1px margin from the top menu */
    #centeredmenu ul ul li a,
    #centeredmenu ul li a,
    #centeredmenu ul li:hover ul li a,
    #centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */
    font-weight:normal; /* resets the bold set for the top level menu items */
    line-height:20px; /* overwrite line-height value from top menu */
    padding:.5em .5em;
    color: white;
    background: black;
    #centeredmenu ul ul li a:hover,
    #centeredmenu ul ul li a:hover,
    #centeredmenu ul li:hover ul li a:hover,
    #centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
    color: white;
    background: purple;

    /* Flip the last submenu so it stays within the page */
    #centeredmenu ul ul.last {
    left:auto; /* reset left:0; value */
    right:0; /* Set right value instead */

    /* Make the sub menus appear on hover */
    #centeredmenu ul li:hover ul,
    #centeredmenu ul li.hover ul { /* This line is required for IE 6 and below */
    display:block; /* Show the sub menus */
    here the code that i use for the bar!

    1. Hi my comment is useless now i fixed the problem but i have still a problem with the background it s not full the bar and how to remove the white border between the tabs/pages?
      Thanks for the tuto.

        1. It looks like you didn’t remove your old CSS and that is an important step that I mentioned in the video. Go back to the video and start playing at 4:45 where I talk about how to remove the old CSS. I know that is causing quite a few of your problems but I can’t really tell what else needs to be fixed until that is taken care of =)

          1. hi thanks i tried and i achieved the tuto but still a trouble with the bar ! the bar is not crossing my picture like this one or this one i dont get it i did everything that you showed in your video. how i can fix this ?

          2. and in your tuto you dont show how to put the link at the bottom of the bar mine are too close from of the top i cant click on the sub for example.

          3. Ok, we need to make a couple of changes:
            1. Search for #foxmenucontainer and add:
            z-index: 5;

            2. Search for #centeredmenu ul li a and change the padding line to this:
            padding: 0em 1.8em !important;

            3. Search for #centeredmenu ul li a and change the line-height to this:
            line-height: 35px;

            4. Search for #centeredmenu ul ul and change the top to this:
            top: 35px;

            5. Search for #centeredmenu ul li and change the margin to this:
            margin: 0px;

            6. Search for /* overwrite line-height value from top menu */ and change that 20px line-height to:
            line-height: 35px;

  4. thanks you so much! i cant be more grateful!! really. i used all your tuto and they are all amazing. i will be back. thanks again.
    ps : are you going to make this tuto but this time how to add social icon on the bar?

  5. This looks like such a great tutorial!!! I can’t wait to try it. My nav bar and header are one image map. Would I still be able to make my nav bar drop down?


    1. That’s more advanced HTML. I actually had to go into my template and move around the HTML to have the navigation at the top when I was in Blogger. If having that is a goal of yours, I would just recommend buying a premade blogger template that already has a menu at the top like you want it.

  6. It worked way! You are amazing!!! Oh and I just wanted to ask a question. I made mine a sticky gadget and I really want to change the font but it won’t work. :(

  7. “You give blogging a good name” just teh best tutorial I´ve seen on the topic.

    One additional request, if I may, is it possible to link by opening new windows, without loosing the style of the page (I´ve tried a solution of my own but interfiered with the menu bars).

    Thanks in advance for all your help

  8. Hi Stephanie!

    Thanks so much for the tutorial! How do you full width the tabs on the top of the blog? I’ve gotten mine to go on the top, but I’m having trouble finding a way to full width them to fit the screen, like yours :)


      1. In a way, yes. The menu is set to a width of 100% so it will fill the entire element it is in. That means you have a div around the menu that has a width value like 1000px. You’ll need to find that div and change the width to 100%. If you don’t want your entire blog to be full width, you’ll need to find a div that wraps around the blog posts and assign a set width to that, like 1000px.

    1. If you want a completely transparent background, you just have to remove the background color CSS from your CSS file. If you want a transparent color, you’ll need to look up the rgb value and enter the background color like this:
      rgba(255, 255, 255, 0.42);

      The first three numbers are the rgb values and the last one is the opacity. Higher number is more opacity :)

  9. First off, love your post! Really helps a lot. BUT. I did your tutorial and when I press the drop down “About” and whatnot, it goes back to your blog.Uh, help? Did I do something wrong?

    1. Oops, I found out what I did wrong, except I have no clue how to fix it.I’m supposed to link it in the HTML/Java script thing to my site, but I don’t have a link to go into it. I still have the same problem, but I don’t know how to fix it :( Any ideas?