Greeny CSS Drop Down Menu Bar For Blogger

In this tutorial im gonna explain how to add greeny drop down menu bar for your blogger.Its included
nice drop down menu. you can check it from below demo link.Im using CSS and HTML for this tutorial i already created lot of  menu bar tutorial you can get my all menu bar  here

Demo

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here bloggertrix.com */
#bloggertrix_menu1{
height:32px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs83B9x7AoqjW8hkkztyx7NWB9KZE2EhPvcX__AE5kB8egsjmT4Mg2tGu5uehvdqh7-N8LrpBa_TxsOCfwzRnL6JnN8DXdM0Nb6JImCVZUThx_HGget6V2AbFgEd1GTFRW5s_9Ll7p_Fc/s1600/bloggertrix.com_menubg.png);
display:block;padding:0px 0 0px 0px;
font: 10px Tahoma,Century gothic,verdana, Arial, sans-serif;
font-weight:normal;text-transform:uppercase;overflow:hidden;
width:960px;
}
#bloggertrix_menu{
margin: 0px;padding: 0px 1px;width:998px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs83B9x7AoqjW8hkkztyx7NWB9KZE2EhPvcX__AE5kB8egsjmT4Mg2tGu5uehvdqh7-N8LrpBa_TxsOCfwzRnL6JnN8DXdM0Nb6JImCVZUThx_HGget6V2AbFgEd1GTFRW5s_9Ll7p_Fc/s1600/bloggertrix.com_menubg.png) ;
height:32px;
}
#bloggertrix_menu ul {
float: left;list-style: none;margin: 0px;
padding: 0px;
}
#bloggertrix_menu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#bloggertrix_menu li a, #bloggertrix_menu li a:link, #bloggertrix_menu li a:visited {
color: #bfe195;
display: block;
margin: 0px;
padding: 10px 10px 10px 10px;
}
#bloggertrix_menu li a:hover, #bloggertrix_menu li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs83B9x7AoqjW8hkkztyx7NWB9KZE2EhPvcX__AE5kB8egsjmT4Mg2tGu5uehvdqh7-N8LrpBa_TxsOCfwzRnL6JnN8DXdM0Nb6JImCVZUThx_HGget6V2AbFgEd1GTFRW5s_9Ll7p_Fc/s1600/bloggertrix.com_menubg.png) repeat-x ;
color: #fff;
margin: 0px;
padding: 10px 10px 10px 10px;
text-decoration: none;
}
#bloggertrix_menu li li a, #bloggertrix_menu li li a:link, #bloggertrix_menu li li a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs83B9x7AoqjW8hkkztyx7NWB9KZE2EhPvcX__AE5kB8egsjmT4Mg2tGu5uehvdqh7-N8LrpBa_TxsOCfwzRnL6JnN8DXdM0Nb6JImCVZUThx_HGget6V2AbFgEd1GTFRW5s_9Ll7p_Fc/s1600/bloggertrix.com_menubg.png) ;
width: 150px;
color: #bfe195;
font-family:Tahoma,century gothic,Georgia,  sans-serif;
font-weight: normal;float: none;margin: 0px;padding: 9px 10px 9px 10px;
border-bottom: 1px solid #5E9F09;
}
#bloggertrix_menu li li a:hover, #bloggertrix_menu li li a:active {
background:#3f6d06;
color: #fff;
padding: 9px 10px 9px 10px;
}
#bloggertrix_menu li ul {
z-index: 9999;
position: absolute;
left: -999em;height: auto;width: 170px;margin: 0px;
padding: 0px;
}
#bloggertrix_menu li li {
}
#bloggertrix_menu li ul a {
width: 140px;
}
#bloggertrix_menu li ul a:hover, #bloggertrix_menu li ul a:active {
}
#bloggertrix_menu li ul ul {
margin: -31px 0 0 170px;
}
#bloggertrix_menu li:hover ul ul, #bloggertrix_menu li:hover ul ul ul,
#bloggertrix_menu li.sfhover ul ul, #bloggertrix_menu li.sfhover ul ul ul {
left: -999em;
}
#bloggertrix_menu li:hover ul, #bloggertrix_menu li li:hover ul,
#bloggertrix_menu li li li:hover ul, #bloggertrix_menu li.sfhover ul,
#bloggertrix_menu li li.sfhover ul, #bloggertrix_menu li li li.sfhover ul {
left: auto;
}
#bloggertrix_menu li:hover, #bloggertrix_menu li.sfhover {
position: static;
}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

 <div id="bloggertrix_menu1">
<div id="bloggertrix_menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Business</a>
<ul class="children">
<li><a href="#">Internet</a></li>
<li><a href="#">Market</a></li>
<li><a href="#">Stock</a></li>
</ul>
</li>
<li><a href="http://www.bloggertrix.com/">Downloads</a>
<ul class="children">
<li><a href="#">Dvd</a></li>
<li><a href="#">Games</a></li>
<li><a href="#">Software</a>
<ul class="children">
<li><a href="#">Office</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.bloggertrix.com/">Parent Category</a>
<ul class="children">
<li><a href="http://www.bloggertrix.com/">Child Category 1</a>
<ul class="children">
<li><a href="#">Sub Child Category 1</a></li>
<li><a href="#">Sub Child Category 2</a></li>
<li><a href="#">Sub Child Category 3</a></li>
</ul>
</li>
<li><a href="#">Child Category 2</a></li>
<li><a href="#">Child Category 3</a></li>
<li><a href="#">Child Category 4</a></li>
</ul>
</li>
<li><a href="#">Featured</a></li>
<li><a href="#">Health</a>
<ul class="children">
<li><a href="#">Childcare</a></li>
<li><a href="#">Doctors</a></li>
</ul>
</li>
<li><a href="http://www.bloggertrix.com/">Uncategorized</a></li>
</ul>
</div>
</div>

10. Now save your HTML/Javascript'.

    You are done...