Make Responsive Drop Down Menu In Blogger

By default there is no drop down menu in Blogger. Just a simple navigation menu that you can make with pages gadget. The only good thing with pages gadget, it's mobile friendly means it's a responsive menu.

So, I thought of posting an article that can help people with this easiest drop down menu. 

Steps to follow

• Login to your Blogger profile.
• In Layout section click on 'Add a Gadget'
• Select 'HTML/Javascript Gadget'
• Copy and Paste the following code in it

 <!-start dropdownmenu here>
<ul id='dropdownmenu'>
<li class="active"><a href='#'>Home</a></li>
<li class="sub"><a href='#'>Menu1</a>
<ul>
<li><a href='#'>SubMenu1</a></li>
<li><a href='#'>SubMenu2</a></li>
<li><a href='#'>SubMenu3</a></li>
</ul>
</li>
<li><a href='#'>Menu2</a>
<ul>
<li><a href='#'>SubMenu1</a></li>
<li><a href='#'>SubMenu2</a></li>
<li><a href='#'>SubMenu3</a></li>
</ul>
</li>
<li><a href='#'>Menu3</a>
<ul>
<li><a href='#'>SubMenu1</a></li>
<li><a href='#'>SubMenu2</a></li>
<li><a href='#'>SubMenu3</a></li>
</ul>
</li>
<li><a href='#'>Menu4</a>
<ul>
<li><a href='#'>SubMenu1</a></li>
<li><a href='#'>SubMenu2</a></li>
<li><a href='#'>SubMenu3</a></li>
</ul>
</li>
</ul>
<!-end dropdownmenu->

• After that you'll see something like this on your blog. Don't worry about that as we will style it with CSS.

• Now copy and paste this in Template > Customize > Advanced > Add CSS. And click on Apply.

 #dropdownmenu{
margin:0px 0 0 -30px;
padding:0px 0px 0px 0px;
width: 1050px; /*Set Width of Blog Menu*/
font:§(tabs.font); /*Change Font Type,Size,Etc*/
color:§(tabs.text.color); /*Change Font Color*/
}
#dropdownmenu ul{
background:§(tabs.background.color)§(tabs.background.gradient)
repeat-x scroll 0 -800px;
_background-image:none; /*Change Menu BG*/
height:20px; /*Height*/
list-style:none;
margin:0px;
padding:0px;
}
#dropdownmenu li{
float:left;
padding:0px;
}
#dropdownmenu li a{
background:§(tabs.background.color)§(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image:none; /*Change Menu BG*/
display:block;
margin:0px;
font:§(tabs.font); /*Change Font Type,Size,Etc*/
text-decoration:none;
}
#dropdownmenu > ul > li > a{
color:§(tabs.text.color); /*Change Font Color*/
}
#dropdownmenu ul ul a{
color:§(tabs.text.color); /*Change Font Size*/
}
#dropdownmenu li > a:hover, #dropdownmenu ul li:hover{
color:§(tabs.selected.text.color); /*Change Font Color On Hover*/
background-color:§(tabs.selected.background.color); /*Change Font BG Color*/
text-decoration:none;
}
#dropdownmenu li ul {
background:§(tabs.background.color)§(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image:none; /*Change Menu BG*/
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:100px; /*Change Width of Drop Down Menu*/
z-index:9999;
}
#dropdownmenu li:hover ul{
display:block;
}
#dropdownmenu li li {
background:§(tabs.background.color)§(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image:none;/*Change Menu BG*/
display:block;
float:none;
margin:0px;
padding:0px;
width:200px; /*Change Width of DropDown Menu*/
}
#dropdownmenu li:hover li a{
background:§(tabs.selected.background.color);/*Change BG  of Link Hover*/
}
#dropdownmenu li ul a{
display:block;
height:auto;
margin:0px;
padding:10px;
text-align:left;
}
#dropdownmenu li ul a:hover, #dropdownmenu li ul li:hover > a{
color:§(tabs.selected.text.color);/*Change Text Color On Hover*/
background-color:§(tabs.selected.background.color);/*Change BG on Hover*/
border:0px;
text-decoration:none;
}

• Now your drop down menu is ready.

To Customize

To change the link in menu

Please replace # highlighted in code above with your own link.

Everything else can be changed in 'Template Designer'.