Update: We have published almost 9 more menus like this one. To get them all just use the search box and type drop down menu. If you wish to add the same menu to Blogger Template Designer templates then read this post -> Custom Drop Down menu
Why do you run after scripts such as jquery while you can use simple CSS and HTML to create beautiful drop down menus for your blog. I already shared a list of 30 Navigation menus and now you need to learn how to create a drop down menu in a navigation. I am sharing a simple code here that can be fully customize to make your preferred changes. So lets get to work!
How To Create a Drop Down Menu?
A drop down menu is needed when you have too much content on your blog or you love keeping things organized. To add a drop down menu to your blogger blogs do this:
- Go To Blogger > Design > Page Elements
- Select a HTML/JavaScript Widget just under the header and paste the following code inside it,
<div id='mbtnavbar'>
<ul id='mbtnav'>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>About</a>
</li>
<li>
<a href='#'>Contact</a>
</li>
<li>
<a href='#'>Sitemap</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>
</ul>
</div>
Replace # with your Page Links and the bolded text with relevant page names. The yellow highlighted code is responsible for the drop down menu. You can copy and paste it under any tab you want just before </li>
To add another tab just paste this code above </ul>
<li>
<a href='#'>Tab Name</a>
</li>
3. Now Go to Design > Edit HTML
4. Backup your template and search for ,
]]></b:skin>
3. Just above it paste the code below,
/*----- MBT Drop Down Menu ----*/
#mbtnavbar {
background: #060505;
width: 960px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
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 #333;
border-right:1px solid #333;
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: #BF0100;
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;
}
Make these changes:
- Change #060505 to change background color of the Main menu
- Change the yellow highlighted text to change font color, size and family
- Change #BF0100 to change the background of a tab on mouse hover
- Change #BF0100 to change the background color of the drop down menu
- Change #060505 to change the background color of drop down menu on mouse hover
4. Save your template and you are done!
Visit your Blogs to see a beautiful Navigation menu just below Header. Have Fun! :)
If you have any questions feel free to post them.
Anims 
BuySellAds is a name that is known to all. It is an advertisement service where you can buy and sell ads out of thousands of blogs and websites. Ads are displayed in different format sizes, the most popular being 125 by 125 and 468 by 60 and 300 by 250. By default the empty Ad Posts look dull and grey in color just like these,
After successfully customizing 
It is no wonder that web technology has developed tremendously over the recent years. Fonts that were once stored in user’s computers are now embedded in templates. Few years back you could use only those fonts in your templates which were available on major operating systems and in order to view those stylish fonts on your websites, the user should already had fonts installed on their PCs. Today you can use any font you like for your designing purposes and the reader doesn’t need having those fonts installed on his PC. Thanks to 
CSS is a fun thing to play with. With the growing development of cascading style sheet and with the accepting compatibility of new browsers, web designing is becoming more and more creative. We once used Photoshop to manually add drop shadows to images but now thanks to CSS3 you can add drop shadows to all your images automatically. We will learn today how to minimize the size of large images and how can we make them expand to their original size on mouse hover. I am sure you will love it :)
I received several emails this week regarding how to create a contact form, web form, email form etc. Few months back I wrote a detailed tutorial on how to create a HTML and CSS based Email Me form. In that tutorial I mentioned every single step of embedding a high quality free Contact form in your 
Its really important to keep everything as attractive as possible while writing posts. Text Area boxes are a useful method of showing long bunch of text or code on your blog. Just last month I wrote two posts 
You have seen many mind blowing widgets on 
You might have seen a roll over Image effect in many professional and commercial blogs. By roll over I mean that when you hover your mouse cursor on the Image, the image border colour and style/appearance changes. Well using some simple CSS you can add some amazing effects to your Blog Images. Without wasting any time lets jump straight to the steps to be followed.