How to Make a Drop Down Menu in Blogger

Here is a simple, browser-friendly drop down menu bar that you can use in Blogger!

You will be able to customize this menu bar with detailed guides found in this tutorial!

Step 1: Go to your Blogger blog and click “Design” then “Edit HTML.”  Backup your template and widgets!

Step 2: Click “CTRL + F” and paste this in the box:  ]]></b:skin>

Step 3: Directly ABOVE the code you just found, paste all the following code.  (This styles your menu bar with background colors, text colors, borders, etc…)

#mbtnavbar {
    background: #0033CC;
    width: 960px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #809FFE;
        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 #0033CC;
        border-right:1px solid #0033CC;
        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: #0033CC;
    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;
}
</style>

Step 4: Save your template.  Then click on the “Page Elements” link and add an “HTML/Javascript” widget. Copy and paste the following code into an HTML/Javascript Widget. (These are the names and links for your menu bar.)

<center>    
<div id='mbtnavbar'>
<ul id='mbtnav'>
<li>
<a href='#'>Home</a>
</li>
<li><a href='#'>About</a>
<ul>

<li><a href='#'>Param</a></li>
   <li><a href='#'>Sunil</a></li>
   <li><a href='#'>Chandan</a></li>
</ul>
</li>
<li>
<a href='#'>Contact</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>
<li>

<a href='#'>Sitemap</a>
<ul>
<li><a href='http://paramworld.weebly.com' target='_blank'>Weebly</a>
</li>
<li><a href='http://paramworld.webs.com' target='_blank'>Webs</a></li>
<li><a href='http://param-world.blogspot.com' target='_blank'>Blog</a>
</li>
</ul>

</li>
</ul>
</div>
<li>
<a href='#'>Success</a>
</li>
</center>

Step 5: Click and drag the widget to the area beneath your header, or alternately, the area above your blog posts.

If you have any questions, simply leave a comment!  I would love to see it LIVE on your blog, so leave a comment with your URL!