Saturday, 16 February 2013

Creating Simple Drop Down Menu For Blogger

blogger drop down menu
A drop down is really essential tool or widget for any blog or websites. It gives real feel or look of the template or blog. Drop down menu lets users easily navigate through different parts of the blog. In this tutorial i will teach you to add simple navigation menu or Drop down menu to your blog. The good thing about this widget is that it requires no jquery and is coded completely in Html and CSS. So it loads really fast. Lets get started!.

How To Add Drop Down Menu ?

1. Go to blogger Dashboard and click on Layout.
2. Then Click on Add Gadget (Below Header not on sidebar) and Choose Html/Javascript Widget.
3. Now Paste below code into it.
<div id='mbwnavbar'>
      <ul id='mbwnav'>
          <a href='#'>Home</a>
          <a href='#'>About</a>
          <a href='#'>Contact</a>
           <a href='#'>Sitemap</a>
                <li><a href='#'>Sub Category #1</a></li>
                <li><a href='#'>Sub Category#2</a></li>
4. Now Change the text in Bold with appropriate label and also replace the url highlighted in red color (#).
5. To add another tab to the drop down menu then add below code before </ul>. or delete that code from above code to remove any menu.
       <a href='#'>Contact</a>
6. Now we will add CSS, Go to Blogger Dashboard and click on Template and click on Edit Html. Backup your template before doing this.

7. Then Search for below code.
8. Paste the below code above the code you searched in Step 7.
/**MBW Navgation bar **/
#mbwnavbar {
    background: #464849;
    width: 960px;
    color: #FFF;
    margin: 0px;
    padding: 0;
    position: relative;
    border-top:0px solid #960100;
#mbwnav {
    margin: 0;
    padding: 0;
#mbwnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
#mbwnav li {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left:1px solid #333;
    border-right:1px solid #333;
#mbwnav li a, #mbwnav li a:link, #mbwnav li a:visited {
   color: #FFF;
   display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
#mbwnav li a:hover, #mbwnav li a:active {
    background: #028490;
    color: #FFF;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 9px 12px 10px 12px;
#mbwnav li {
    float: left;
    padding: 0;
#mbwnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
#mbwnav li ul a {
    width: 140px;
#mbwnav li ul ul {
    margin: -25px 0 0 161px;
#mbwnav li:hover ul ul, #mbwnav li:hover ul ul ul, #mbwnav li.sfhover ul ul, #mbwnav li.sfhover ul ul ul {
    left: -999em;
#mbwnav li:hover ul, #mbwnav li li:hover ul, #mbwnav li li li:hover ul, #mbwnav li.sfhover ul, #mbwnav li li.sfhover ul, #mbwnav li li li.sfhover ul {
    left: auto;
#mbwnav li:hover, #mbwnav li.sfhover {
    position: static;
#mbwnav li li a, #mbwnav li li a:link, #mbwnav li li a:visited {
    background: #028490;
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
    border-bottom:1px dotted #333;
#mbwnav li li a:hover, #mbwnavli li a:active {
    background: #70b6bd;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
 9. Save the template and you will have drop down menu added to your blog.

Customizing Above Widget

This part is completely optional. If the above provided plugin does not match the theme of your blog and want to customize to match template of your blog then change some Hex code listed below.
  • Change #464849 to change background color of navigation bar which is currently dark grey.
  • Change #028490 to change the color of tab on mouse hover.
  • Change #028490 to change the color of Drop down menu
  • Change #70b6bd to change the color of Drop down on mouse hover.

Any Question ?

If you find this plugin usefull or got into problem while adding this plugin to your blog then leave a comment below i will be glad to help you out. Dont forget to subscribe and follow us on google+,twitter and facebook.

Subscribe To Get FREE Tutorials!


Fade Cuyusuke on 23 February 2013 18:16 said...

hey can u please help me with my drop down,it doesnt show in front. it is in the back

nakib mbw on 25 February 2013 11:16 said...

Can you post a screenshot

Nishanth C R C R on 27 February 2013 02:17 said...

i cant change the colour of the main its in white colour wht i do please tell me here is the screen shot

nakib mbw on 7 March 2013 09:07 said...

Hey man you have given me screen shot of windows task manager and in order to change background of drop down menu change #464849 to any color you like.
Hope this help you!

heather smythe on 6 April 2013 20:45 said...

How do you make it so you can click on like 'about' and it will go to that page?

nakib mbw on 8 April 2013 21:39 said...

Replace # with the link where you want to redirect when someone click on About.

Randi Poole on 20 April 2013 14:33 said...

I followed this all to a T and for some reason my drop downs are not showing up...only the bar??

Matteo Colagrossi on 28 April 2013 13:22 said...
This comment has been removed by the author.
Arun Chaitanya on 3 June 2013 00:32 said...

Hey The Dropdown Menu Is not SHowing Up

Steph on 25 June 2013 22:53 said...

My dropdown menu is showing all of the tabs (haven't input links yet), but I can't get the sub-tabs under the tabs I want they just show up next to the rest...

bibin bibi on 17 July 2013 10:20 said...

My drop down sub menus are not visible. But, If I fix that bar in bottom of my website, that will visible. But, I fixed in top of my website, Sub menus are not visible :( Can you help me?
This is my website-

Prasanth Kumar on 23 July 2013 03:25 said...

how to change the font size in the tab

אביגיל on 31 July 2013 04:56 said...

i'm experiencing same problem.. did you figure this out?

אביגיל on 31 July 2013 04:58 said...

My dropdown menu is showing all of the tabs- I can't get the sub-tabs under the tabs I want they just show up next to the rest...
can you help me solve this?

Mursal Ahmed on 1 August 2013 18:19 said...

There is no ADD gadget option below Header.. ?

liz coll on 4 August 2013 14:39 said...

Is there a way to center the navigation bar?

Gentle Heart Foundation on 28 August 2013 04:23 said...

Did not get drop down list on hover, what may be wrong there, please advise me

ghchnepal on 29 August 2013 03:47 said...

Please see, my navbar is longer than its size

Amy Z Green on 28 October 2013 03:10 said...

I've used your CSS and HTML codes and managed to get it looking right, but I have the problem when the cursor hovers on the submenus and off the parent, the submenus then disappear so I can't click on them. Can you see what the problem might be?


Jerone Simon on 2 December 2013 16:44 said...

thanks for this one.. I use it for my categories.

Husein Rifai on 17 February 2014 18:52 said...

Thank you for your posting

Nessaa E. on 10 March 2014 07:08 said...

hi, this worked perfectly, but based on this code, how can i make the bar go across the entire blog?

Asif Rabbi on 9 April 2014 05:16 said...

Very important and necessary code. Thanks for sharing.
Very Informative Post. Thanks for sharing.
--->>Blogging Tips and Tricks

Javi Agüera on 4 May 2014 06:22 said...

How can I center the bar? Thanks!!!

Luneta Wanda on 6 May 2014 00:33 said...

Hey man you have given me screen shot of windows task manager and in order to change background of drop down menu change poker online #464849 to any color you like.
Hope this help you!

vipin Sheoran on 10 May 2014 10:52 said...

when we go on dropdown list list go to closed, what to do?

Zainab Saleem on 2 July 2014 10:38 said...

thankx it it working.. but how can i make that in center also the drop down menu is also not algined also how can i put this on all pages??

muhammad tehseen on 3 July 2014 11:55 said...

How remove the border of the tabs please....?
the white line between two tabs

Hassan Qadri on 11 July 2014 04:31 said...

Salam, thanks, works great but my drop down menus are'nt visible.....what should i do????

Bharat Goyal on 22 July 2014 08:05 said...

Amazing tips and tricks of pc world

Narendra Reddy on 23 July 2014 06:41 said...

Sir,There is no change in drop down,I mean there is no any drop down

Emily Andersan on 29 July 2014 01:34 said...

the drop menu is not working no dropping only normal menu

Manoj Sharma on 6 August 2014 04:03 said...

Phong Vũ on 13 August 2014 20:30 said...

thankx it it working.. Tri tan nhang - Suc khoe va lam dep - Lam dep khoe - Xin hoi

PRIYA PATEL on 1 September 2014 00:58 said...


earn money online in india

auto msg in facebook all friends wall

how to post all facebook friends wall

auto facebook group poster script

auto facebook group poster script


Cyber boy on 4 September 2014 22:04 said...

great tricks, like it a lot

AMIT KUMAR on 7 September 2014 03:00 said...

Finally got something that worked on my blog .I want to give my link to show you but brother i don't want to spam ................well thanks for a great share !
finally i am feeling relaxed .....!

otr on 10 September 2014 05:43 said...

Work from home theory is fast gaining popularity because of the freedom and flexibility that comes with it. Since one is not bound by fixed working hours, they can schedule their work at the time when they feel most productive and convenient to them. Women & Men benefit a lot from this concept of work since they can balance their home and work perfectly. People mostly find that in this situation, their productivity is higher and stress levels lower. Those who like isolation and a tranquil work environment also tend to prefer this way of working. Today, with the kind of communication networks available, millions of people worldwide are considering this option.

Women & Men who want to be independent but cannot afford to leave their responsibilities at home aside will benefit a lot from this concept of work. It makes it easier to maintain a healthy balance between home and work. The family doesn't get neglected and you can get your work done too. You can thus effectively juggle home responsibilities with your career. Working from home is definitely a viable option but it also needs a lot of hard work and discipline. You have to make a time schedule for yourself and stick to it. There will be a time frame of course for any job you take up and you have to fulfill that project within that time frame.

There are many things that can be done working from home. A few of them is listed below that will give you a general idea about the benefits of this concept.

This is the most common and highly preferred job that Women & Men like doing. Since in today's competitive world both the parents have to work they need a secure place to leave behind their children who will take care of them and parents can also relax without being worried all the time. In this job you don't require any degree or qualifications. You only have to know how to take care of children. Parents are happy to pay handsome salary and you can also earn a lot without putting too much of an effort.

For those who have a garden or an open space at your disposal and are also interested in gardening can go for this method of earning money. If given proper time and efforts nursery business can flourish very well and you will earn handsomely. But just as all jobs establishing it will be a bit difficult but the end results are outstanding.

Freelance can be in different wings. Either you can be a freelance reporter or a freelance photographer. You can also do designing or be in the advertising field doing project on your own. Being independent and working independently will depend on your field of work and the availability of its worth in the market. If you like doing jewellery designing you can do that at home totally independently. You can also work on freelancing as a marketing executive working from home. Wanna know more, email us on and we will send you information on how you can actually work as a marketing freelancer.

Internet related work
This is a very vast field and here sky is the limit. All you need is a computer and Internet facility. Whatever field you are into work at home is perfect match in the software field. You can match your time according to your convenience and complete whatever projects you get. To learn more about how to work from home, contact us today on workfromhome.otr214427@gmail.comand our team will get you started on some excellent work from home projects.

Diet food
Since now a days Women & Men are more conscious of the food that they eat hence they prefer to have homemade low cal food and if you can start supplying low cal food to various offices then it will be a very good source of income and not too much of efforts. You can hire a few ladies who will help you out and this can be a good business.

Thus think over this concept and go ahead.

shiv chawla on 19 September 2014 04:38 said...

Thank you ever so for you blog article.Thanks Again. Really Great.
Go My Blog:-

Post a Comment

Newer Posts Newer Posts


Recent Posts


Recent Comments Widget

| My Bloggers World © 2009. All Rights Reserved | Template Style by My Blogger Tricks .com | Design by Brian Gardner | Back To Top |