How to Add Mega Drop Down Menu to Blogger.

Now in this post we will discuss about the drop down menu. This is horizontal drop down menu. This drop down menu is very attractive drop down menu as compare any other drop down menu because there are many drop down option are available on this drop down menu in a single drop down list. This drop down menu is very easy to add your blogger.

Methods to Implements:-

1.       Now Logging to your blogger

Note: - Backup your current template coding after you have to apply this process.

2.      Go to Dashboard---> Template ---> Edit HTML

3.      Press CTRL+F in the code window and find </header> this code. 

4.      Copy below Code and paste in below </header> this code.

<ul class="wc-megamenu" id="nav">
<li class="wcnavlist"><a class="wclink" href="#">Home</a></li>
<li class="wcnavlist"><span class="wclink">Categories</span>
<ul>
<li>
                               <ul>
<li><a href="#">Blogger</a></li>
<li><a href="#">Widgets</a></li>
</ul>
</li>
<li>
                               <ul>
<li><a href="#"> JavaScript </a></li>
<li><a href="#"> HTML5 </a></li>
<li><a href="#"> Jquery </a></li>
</ul>
</li>
<li>
                               <ul>
<li><a href="#"> Services </a></li>
<li><a href="#"> Contact us </a></li>
<li><a href="#"> About us </a></li>
</ul>
</li>


</ul>
</li>

<li class="wcnavlist"><span class="wclink">Andro Hippo</span>
<ul>
<li>
                               <ul>
<li><a href="#">Samsung</a></li>
<li><a href="#">Google</a></li>
<li><a href="#">LG</a></li>
</ul>
</li>
<li>
                               <ul>
<li><a href="#"> Apple </a></li>
<li><a href="#"> Micromax </a></li>
<li><a href="#"> HTC </a></li>
<li><a href="#"> Sony </a></li>
</ul>
</li>
<li>
                               <ul>
<li><a href="#"> Root </a></li>
<li><a href="#"> Recovery </a></li>
<li><a href="#"> Update </a></li>
<li><a href="#"> Review</a></li>
</ul>
</li>


</ul>
</li>

<li class="wcnavlist"><a class="wclink" href="#">Contact Us</a></li>
<li class="wcnavlist"><a class="wclink" href="#">Services</a></li>
<li class="wcnavlist"><a class="wclink" href="#">Privacy Policy</a></li>
</ul>

<style>
 
ul.wc-megamenu li{
font:16px georgia, verdana;
}
ul.wc-megamenu,ul.wc-megamenu li,ul.wc-megamenu ul
{
list-style:none;
margin:0;
padding:0
}
ul.wc-megamenu
{position:relative;z-index:999;float:left;}
ul.wc-megamenu li.hover,ul.wc-megamenu li:hover{position:relative;z-index:9999;color:#111111;text-decoration:none}
ul.wc-megamenu ul li{float:none;font-weight:700}
ul.wc-megamenu li:hover>ul{visibility:visible}
ul.wc-megamenu{width:100%}
ul.wc-megamenu ul li{float:left}
ul.wc-megamenu li.hover,ul.wc-megamenu li:hover{position:static}
ul.wc-megamenu ul ul{display:none!important}
ul.wc-megamenu ul li{position:static;width:180px}
ul.wc-megamenu ul ul{display:block!important;position:static;width:auto!important}
ul.wc-megamenu ul ul li{float:none}
ul.wc-megamenu ul ul ul{display:none}
ul.wc-megamenu li.hover ul,ul.wc-megamenu li:hover ul{visibility:visible!important;color:#fff}
ul.wc-megamenu{background: #111111; font:18px georgia, verdana;}
ul.wc-megamenu a:link,ul.wc-megamenu a:visited{text-decoration:none;color:#2c539e;}
ul.wc-megamenu a:hover{color:#fff}
ul.wc-megamenu a:active{color:#2c539e;}
ul.wc-megamenu li.last ul li{float:right}
ul.wc-megamenu ul ul li{font-weight:400}
ul.wc-megamenu li{float:left;min-height:1px;line-height:1.3em;vertical-align:middle;list-style:none;}
ul.wc-megamenu li a{display:block;}
ul.wc-megamenu ul{list-style:none;visibility:hidden;position:absolute;top:100%;left:0;z-index:99999;width:550px;font-size:14px;letter-spacing:normal;background:#222222; padding:0 0 0 10px}
ul.wc-megamenu ul a{width:180px;padding:5px;color:#222222;}
ul.wc-megamenu ul a:hover{background:#8fc800;}
ul.wc-megamenu ul ul{padding:0;margin-left:-5px;top:1px;left:99%;margin-top:5px;text-transform:none}
ul.wc-megamenu .wcnavlist{padding:4px 10px}
.wclink,.wclink a:link,.wclink a:visited{color:#fff;font-size:18px}
.wclink hover,.wclink a:link,.wclink a:visited.wclink a:active,.wclink a:hover{color:#fff}
ul.wc-megamenu .wcnavlist a:link, ul.wc-megamenu .wcnavlist a:visited,ul.wc-megamenu .wcnavlist a:active{color:#fff}

</style>

5.      Click on "Savetemplate"