Add Green Drop Down CSS3 Navigation Menu Bar

How To Add Green Drop Down CSS3 Navigation Menu Bar For Blogger

1. Log in to blogger account
2. Now select "Template"
3. Now Click EDIT HTML Button"
4. Find this tag by using Ctrl+F ]]></b:skin>
5. Paste below code Before ]]></b:skin>

/* The CSS3 Code for the menu starts here bloggersstand.blogspot.com */
 .bloggersstand-greenymenu{width:950px;background: #7cae15;color:#eee;text-shadow: 1px 1px 1px #495505;display:inline-block;-moz-box-shadow: 3px 3px 4px #007308;
-webkit-box-shadow: 3px 3px 4px #007308;box-shadow: 3px 3px 4px #007308;-moz-border-radius-topleft: 8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomleft:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-left-radius:8px;border-bottom-right-radius:8px;}
.bloggersstand-greenymenu ul{width:950px;padding:0;margin:0 auto}
.bloggersstand-greenymenu li:first-child a{padding:7px 10px 3px}
.bloggersstand-greenymenu li{list-style:none;display:inline-block;float:left}
.bloggersstand-greenymenu li a{background:url(http://1.bp.blogspot.com/-4OIAjD0uSN0/UR1FWgJm2YI/AAAAAAAAAJk/H-ajqHe53Ic/s1600/sprite.png) right no-repeat;color:#fff;display:block;font:16px Oswald;position:relative;text-decoration:none;padding: 8px 15px;-moz-border-radius-topleft: 8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomleft:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;
border-top-left-radius:8px;border-top-right-radius:8px;border-bottom-left-radius:8px;border-bottom-right-radius:8px;}
.bloggersstand-greenymenu li a:hover{background:#333;color:#fff;text-shadow: 1px 1px 1px #000;-moz-border-radius-topleft: 8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomleft:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-left-radius:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;
border-top-left-radius:8px;
border-top-right-radius:8px;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;}
.bloggersstand-greenymenu li a .sf-sub-indicator{overflow:hidden;position:absolute;text-indent:-9999px}
.bloggersstand-greenymenu li li a,.bloggersstand-greenymenu li li a:link,.bloggersstand-greenymenu li li a:visited{background:#439700;border-bottom:1px solid #000;border-right:none;color:#fff;font:12px Arial;position:relative;text-transform:none;width:138px;padding:10px 10px;text-shadow: none;opacity:0.8}
.bloggersstand-greenymenu li li a:hover,.bloggersstand-greenymenu li li a:active{background:#444}
.bloggersstand-greenymenu li ul{height:auto;left:-9999px;position:absolute;width:160px;z-index:9999;margin:0}
.bloggersstand-greenymenu li ul a{width:140px}
.bloggersstand-greenymenu li ul ul{margin:-33px 0 0 157px}
.bloggersstand-greenymenu li:hover>ul,.bloggersstand-greenymenu li.sfHover ul{left:auto}
.menusearch{width:200px;float:right;margin:0 auto;padding:5px 10px 0}
.searchform {margin-top:0px;display: inline-block;*display: inline;padding:0;background:#fff;width:200px;height:23px; overflow:hidden;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;border:1px solid #5c820d;}
.searchform input {font:italic 12px Arial;color:#222;line-height:23px;height:23px;padding:0;margin:0;}
.searchform .searchfield {background:transparent;padding:0 0 0 6px;margin:0;width: 160px;height:23px;border:0px;outline: none;line-height:23px;}
.searchform .searchbutton{border:none;font-size:12px;height:23px;width:23px;margin:0;padding:0}

6. Go to blogger and click Layout
7. Click Add Gadget and select 'HTML/Javascript
8. Paste below code.

<div class="bloggersstand-greenymenu">
<ul class="sf-menu">
<li><a href="http://www.blogger.com/"><img alt="home" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjBv_4Fe4Swxe3NYdabDG9P6va3zbigBX66uM6S_oszWDHFfrO9WpM4eEmNCv_CT8KF93bbuXCwqlY7Syrt0kN0WE3NsdoMywSMQiCSnm_x8U7jKfpkk2QWKZuHp6w3loaQ4thyWWimyw/s1600/home.gif" style="padding: 0px;" /></a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Drop Menu 1</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Drop Menu 3</a>
<ul>
<li><a href="#">Sub Drop Menu 3.1</a></li>
<li><a href="#">Sub Drop Menu 3.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Drop Menu 2</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
<div class="menusearch">
<form action="/search" class="searchform" method="get">
<input class="searchfield" id="q" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value=''" type="text" value="Search here...." />
    <input class="searchbutton" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv3wr3MNNKbCMMJvaI3hEYDou18YF6zsqJeYYuUQfZQhtsdckR_Fa3OeFd6kEFnS1y-r3EfV_SVs_tQo7gatJHswpsIoDel7_wD5BPUwWy8sV9Pz0IJF1YzNWy0fdNEjT61Jlfyh0lqEA/s1600/tombolcari.gif" style="cursor: pointer; vertical-align: top;" type="image" value="Go" />
</form>
</div>
</div>

*Change All # With Your Links.

9. Now save your HTML/Javascript'. Done!

If you have any query regarding Green Colour Drop Down CSS3 Navigation Menu Bar for blogger.it give amazing look to your website or blog.Feel free to ask,just drop your comment below.