How to add Hex Colour Code Generator & Wheel Tool To Blogger
Share this article with your friends.

This specific Menu Bar is strictly/Follow created with CSS, merely Not any Jquery or maybeJavaScript is required. For that reason this hundreds astonishingly quickly with out effecting the blog`s loading speed. after you have a Blogger diary web site then you ought to do that large Menu r.
Related Links You Like It.. :-
- Add Css Based Dropdown Menu.
- Animated Excellent Menu with Multicolor Effect.
- Nice Css3 Dropdown Menu To Blogger.
Follow My Steps :-
- 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.
You Want To Copy Code First Select And Press Key Ctrl + C
<ul class="wc-Hugemenu" 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>
ul.wc-Hugemenu li{
font:16px georgia, verdana;
}
ul.wc-Hugemenu,ul.wc-Hugemenu li,ul.wc-Hugemenu ul
{
list-style:none;
margin:0;
padding:0
}
ul.wc-Hugemenu
{position:relative;z-index:999;float:left;}
ul.wc-Hugemenu li.hover,ul.wc-Hugemenu li:hover{position:relative;z-index:9999;color:#111111;text-decoration:none}
ul.wc-Hugemenu ul li{float:none;font-weight:700}
ul.wc-Hugemenu li:hover>ul{visibility:visible}
ul.wc-Hugemenu{width:100%}
ul.wc-Hugemenu ul li{float:left}
ul.wc-Hugemenu li.hover,ul.wc-Hugemenu li:hover{position:static}
ul.wc-Hugemenu ul ul{display:none!important}
ul.wc-Hugemenu ul li{position:static;width:180px}
ul.wc-Hugemenu ul ul{display:block!important;position:static;width:auto!important}
ul.wc-Hugemenu ul ul li{float:none}
ul.wc-Hugemenu ul ul ul{display:none}
ul.wc-Hugemenu li.hover ul,ul.wc-Hugemenu li:hover ul{visibility:visible!important;color:#fff}
ul.wc-Hugemenu{background: #111111; font:18px georgia, verdana;}
ul.wc-Hugemenu a:link,ul.wc-Hugemenu a:visited{text-decoration:none;color:#2c539e;}
ul.wc-Hugemenu a:hover{color:#fff}
ul.wc-Hugemenu a:active{color:#2c539e;}
ul.wc-Hugemenu li.last ul li{float:right}
ul.wc-Hugemenu ul ul li{font-weight:400}
ul.wc-Hugemenu li{float:left;min-height:1px;line-height:1.3em;vertical-align:middle;list-style:none;}
ul.wc-Hugemenu li a{display:block;}
ul.wc-Hugemenu 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-Hugemenu ul a{width:180px;padding:5px;color:#222222;}
ul.wc-Hugemenu ul a:hover{background:#8fc800;}
ul.wc-Hugemenu ul ul{padding:0;margin-left:-5px;top:1px;left:99%;margin-top:5px;text-transform:none}
ul.wc-Hugemenu .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-Hugemenu .wcnavlist a:link, ul.wc-Hugemenu .wcnavlist a:visited,ul.wc-Hugemenu .wcnavlist a:active{color:#fff}
</style>