Multi Drop Down CSS Menu for Blog and HTML Sites

In this Post I am going to tell you how to add a beautiful and Professional Drop Down Menu any Site or Blog,as i told this is Css drop-down Menu and in Five different Color :-Orange,Red,Green,Blue and Purple.
Note:-If you want this menu in different color you ask in Comment ,i can make it for you .

CSS EFFECT..

Now First we will add the CSS Code in Blogger Template ..  so follow my Simple below Instruction..

• Login to Blogger  >> Click on drop down menu >>then select "Template".
• Now you will see  "EDIT HTML" Button ,Click on it >>  and then click Proceed button .
• Now find this tag </head> by using CTRL + F 
• Paste below code Just Before/above </head> tag  and Save the Template.

<link charset='utf-8' href='http://cloud.github.com/downloads/egytricks/codes/stencil.menu.css' media='screen' rel='stylesheet' title='no title'/>
<link charset='utf-8' href='http://cloud.github.com/downloads/egytricks/codes/stencil.menu.colors.css' media='screen' rel='stylesheet' title='no title' type='text/css'/>

MENU CODE

Now we can  use below code to add menu any where we want. you can add it as HTML WIDGET in blogger layout,But i will  Recommend You to Replace this menu code in your Blogger Template with already existing one., or add below code before or after already existing one menu code ..

<div class="navigation" style="z-index: 9;">
<ul class="stn-menu red">
<li><a href="javascript:;">Item #1</a></li>
<li class="hasSubNav hasArrow">
<a href="javascript:;">Item #2</a>
<span class="arrow"></span>

<ul>
<li><a href="javascript:;">Sub Item</a></li>
<li><a href="javascript:;">Sub Item</a></li>
<li>
<a href="javascript:;">Sub Item</a>
<span class="arrow"></span>

<ul>
<li><a href="javascript:;">Sub Item</a></li>
<li><a href="javascript:;">Sub Item</a></li>
<li><a href="javascript:;">Sub Item</a></li>
<li>

<a href="javascript:;">Sub Item</a>
<span class="arrow"></span>

<ul>
<li><a href="javascript:;">Sub Item</a></li>
<li><a href="javascript:;">Sub Item</a></li>
<li><a href="javascript:;">Sub Item</a></li>
<li><a href="javascript:;">Sub Item</a></li>
</ul>
</li>
</ul>

</li>
<li><a href="javascript:;">Sub Item</a></li>
<li><a href="javascript:;">Sub Item</a></li>
</ul>
</li>
<li class="hasSubNav hasArrow">
<a href="javascript:;">Item #3</a>
<span class="arrow"></span>

<ul>
<li><a href="javascript:;">Sub Item</a></li>
<li><a href="javascript:;">Sub Item</a></li>
<li><a href="javascript:;">Sub Item</a></li>
<li><a href="javascript:;">Sub Item</a></li>
</ul>
</li>
<li class="hasSubNav hasArrow">
<a href="javascript:;">Item #4</a>
<span class="arrow"></span>

<ul>
<li><a href="javascript:;">Sub Item</a></li>
<li><a href="javascript:;">Sub Item</a></li>
<li><a href="javascript:;">Sub Item</a></li>
<li><a href="javascript:;">Sub Item</a></li>
</ul>

</li>
<li><a href="javascript:;">Item #5</a></li>
</ul>
</div>

CHANGING COLOR OF MENU

To change the you have to find

<ul class="stn-menu red">

and Replace with

For Orange

<ul class="stn-menu">

For Red

<ul class="stn-menu red">

For Green

<ul class="stn-menu green">

For Blue

<ul class="stn-menu blue">

For Purple

<ul class="stn-menu purple">

Hope you Like this Menu ...You See a Live Demo Here

NOTE:-DON'T COPY THIS POST OR CONTENT WITHOUT LINK-BACK THIS POST ,I HAVE SPENT HOURS ON THIS ...