How To: Dropdown Menu Bars in Blogger

I've had this topic come up several times now, so I figured an explanation was in order.

See this? This is what we're gonna make, in CU colors.

The bar is composed of two parts, one that tells it how to look, and one that tells it how to act.

---

Let's tell do the looks first.

1. Log into blogger, click on your blog, then go to "Template"
2. Click "Edit HTML" beneath the photo of your blog (Under "Live on Blog")
3. Control + F to search, or simply scan visually, for a bit that says "]]></b:skin>"
4. Paste the following code directly in front of "]]></b:skin>". Then click "Save template", once it saves, click "Close". Do not make any other changes.

/*----- Drop Down Menu ----*/
    #mbtnavbar {
        background: #ffffff;
        width: 100%;
        color: #ccc;
            margin-left: -30px;
            padding: 0;
            position:  relative;
            border-top:0px solid #ffffff;
            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: 0px solid #fff;
            border-right: 0px solid #fff;
            height:35px;
    }
    #mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
        color: #000;
        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: #CFB87C;
        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: 80px;
        margin: 0;
        padding: 0;
    }
    #mbtnav li ul a {
        width: 80px;
    }
    #mbtnav li ul ul {
        margin: -25px 0 0 80px;
    }
    #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: #CFB87C;
        width: 80px;
        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 #A2A4A3;
border-left:1px solid #fff;
border-right:1px solid #fff;   
    }
    #mbtnav li li a:hover, #mbtnavli li a:active {
        background: #cccccc;
        width: 80px;
        color: #FFF;
           display: block;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
    }

(You'll notice this all says "mbt" in front of this, that's because the original code is from "My Blogger Tricks" and one should always cite her sources. However, it has been modified to meet certain branding standards. Please see their site for more styles and the original code.)

---

Now we can make the bar itself.

The first step is to insert a new space in the template for the menu.

1. Click on "Layout" in the sidebar to get to the layout designer.
2. Click "Add a gadget" beneath your header (It will say "Header" or the title of your blog) to bring up the Add a Gadget menu.
3. Scroll through available gadgets until you find "HTML/JavaScript", then click the blue square with the white + on it to add it to your blog. This gives us a new space in which to put the code for our menu. The box itself should automatically switch to the "Configure HTML/JavaScript" window.

Now we can add in the links themselves.

1. Under "Title", put "Menu Bar"
2. For content, add the code below, to get started. You'll notice it's a list of items:

 <div id='mbtnavbar'>
    <ul id='mbtnav'>
            <li><a href="[V]">[LINK 1]</a></li>
            <li><a href="[W]">[LINK 2]</a></li>
            <li><a href="[X]">[LINK 3]</a></li>
            <li><a href="[Y]">[LINK 4]</a></li>
            <li><a href="[Z]">[LINK 5]</a></li>
   </ul>
</div>

Where the letters are the actual address of the page you want to link to, and [LINK #] is replaced by the title of the link itself. The result looks like this:

But since you want a drop down menu, we need to put a list inside our list. For example:

<div id='mbtnavbar'>
    <ul id='mbtnav'>
            <li><a href="[V]">[LINK 1]</a>
                <ul>
                    <li><a href="[a]">[SUB 1]</a></li>
                    <li><a href="[b]">[SUB 2]</a></li>
                    <li><a href="[c]">[SUB 3]</a></li>
                </ul>
            </li>
            <li><a href="[W]">[LINK 2]</a></li>
            <li><a href="[X]">[LINK 3]</a></li>
            <li><a href="[Y]">[LINK 4]</a></li>
            <li><a href="[Z]">[LINK 5]</a></li>
   </ul>
</div>

(Notice how the </li> after [LINK 1] has moved to AFTER the new list. That's because the [LINK 1] item now includes the sub-menu itself.)

Result:

That's all there is to it. Don't forget to save and back up.