Drop Down Menus in Blogger

I had been suffering for this drop down menus for days. There were a lot of tutorial out there but when I tried it, most of them doesnt work well. There is NO DROP DOWN even though they mentioned it there.

Then I came across to this dropdownmenugenerator . It works well, but there are limitation for free version (only 20 categories are allowed). But I love their features.

Thus, another butt-pain experience to search in Google again. Non-stop trying, and finally I found this: How to create drop-down menus in Blogger . FINALLY, this html and css code works well with me. But I did some little modification on the FONT and also the COLOUR CODE.

First, you will need to:

Layout -> Add Gadget -> Add Html/ Java -> PASTE
*You are free to edit the link highlighted in RED to your own link.*
*YOURLABEL1.1= your Drop Down link.*

<div id='mbtnavbar'> 
<ul id='mbtnav'> 
  <li> 
  <a href='YOURBLOG.blogspot.com'>Home</a> 
  </li> 
  <li> 
  <a href='YOURBLOG.blogspot.com/search/label/YOURLABEL1'>YOURLABEL1</a> 
    <ul> 
    <li><a href='YOURBLOG.blogspot.com/search/label/YOURLABEL1.1'>YOURLABEL1.1</a> 
    </li> 
    </ul>

Then, you will need to:

Template -> Customise -> Advanced -> Add CSS -> PASTE

*you can change the background colour, the font, margin, padding into you own preferences*

.Header h1 {text-shadow: 2px 2px #FFFFFF; } 
/*----- MBT Drop Down Menu ----*/ 

#mbtnavbar { 
/* background: #ff0000; */ 
width: 100%; 
color: #FFF; 
margin: 0px; 
padding: 0; 
position: relative; 
border-top:0px solid #960100; 
height: 41px; 
} 

#mbtnav { 
background: #909092; 
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:41px; 
} 

#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited { 
color: #FFF; 
display: block; 
font:bold 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif; 
margin: 0; 
padding: 9px 12px 10px 12px; 
text-decoration: none; 
} 

#mbtnav li a:hover, #mbtnav li a:active { 
background: #909092; 
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: 200px; 
margin: 0; 
padding: 0; 
} 

#mbtnav li ul a { 
width: 180px; 
} 

#mbtnav li ul ul { 
margin: -35px 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: #909092; 
/* width: 140px; */ 
color: #FFF; 
display: block; 
font:bold 13px Arial, Tahoma, Helvetica, FreeSans, 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; 
} 

.tabs-inner .widget #mbtnavbar li a { 
border-left:none; 
} 

.tabs-outer .widget, .section { 
margin:0; 
} 

.tabs-inner { 
padding: 0px; 
} 

TADAA...you can have your own drop down menus now! :)