- Log in to your blogger dashboard.
- Select your blog.
- Select Template option and click on Edit HTML option.
- In the template code find </header>
- Just below it paste following code and save the template.
- Open your blog to see the new changes
<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>
<li><a href="#">Plugins</a></li>
<li><a href="#">Templates</a></li>
<li><a href="#">Wordpress</a></li>
<li><a href="#">Wp plugins</a></li>
<li><a href="#">Wp Themes</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Traffic</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
<li>
<ul>
<li><a href="#">JavaScript </a></li>
<li><a href="#">HTML5 </a></li>
<li><a href="#">Jquery </a></li>
<li><a href="#">Responsive </a></li>
<li><a href="#">Web design </a></li>
<li><a href="#">Blogging Tips </a></li>
<li><a href="#">Facebook </a></li>
<li><a href="#">Twitter </a></li>
<li><a href="#">Make money </a></li>
<li><a href="#">Adsense </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>
<li><a href="#">Disclaimer</a></li>
<li><a href="#">Privacy Policy </a></li>
<li><a href="#">Terms of use </a></li>
<li><a href="#">Item 7 </a></li>
<li><a href="#">Item 8 </a></li>
<li><a href="#">Item 9 </a></li>
<li><a href="#">Item 10 </a></li>
</ul>
</li>
</ul>
</li>
<li class="wcnavlist"><a class="wclink" href="#">Guest Post</a></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 type="text/css">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>
