Stylist Black Menu for Blogger Blogs

How to add a Black Menu to Blogger Blogs

This is a CSS based and customized beautiful Stylist menu. you can easy add it in any Blogger Blog or in any Html Sites of your wish.in past post we have also posted many other menu like Awesome White Drop Down Menu For Blogger .so we have created a another menu and going to share with all of our users .

Follow my below simple steps to add it your blogger Blog .

• 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 ]]></b:skin> by using CTRL + F 
• Paste below code Just Before/above ]]></b:skin> tag  and Save the Template.

ul#egytricks,ul#egytricks ul{
margin:0;list-style:none;padding:0;background-color:#C0C0C0;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII=");background-repeat:repeat;border-width:0px;border-style:solid;border-color:#999999;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
ul#egytricks ul{
display:none;position:absolute;left:0;top:100%;-moz-box-shadow:0.7px 0.7px 1px #777777;-webkit-box-shadow:0.7px 0.7px 1px #777777;box-shadow:0.7px 0.7px 1px #777777;background-color:#FFF;background-image:none;border-width:1px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border-style:solid;border-color:#d8d9da;padding:0 9px 9px;}
ul#egytricks li:hover>*{
display:block;}
ul#egytricks li{
position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#egytricks li:hover{
z-index:1;}
ul#egytricks{
font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:1px 1px 1px 0;
*display:inline;}
* html ul#egytricks li a{
display:inline-block;}
ul#egytricks>li{
margin:0 0 0 1px;}
ul#egytricks ul>li{
margin:1px 0 0;}
ul#egytricks a:active, ul#egytricks a:focus{
outline-style:none;}
ul#egytricks a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px Arial;color:#262626;cursor:default;padding:10px;background-color:#C0C0C0;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII=");background-repeat:repeat;background-position:0 200px;border-width:0px;border-style:none;border-color:;}
ul#egytricks ul li{
float:none;margin:9px 0 0;}
ul#egytricks ul a{
text-align:left;padding:8px 0 0 0;background-color:#FFF;background-image:none;border-width:1px 0 0 0;border-style:solid;border-color:#D9D9D9;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:13px Arial;color:#333333;text-decoration:none;}
ul#egytricks li:hover>a,ul#egytricks li a.pressed{
background-color:#C0C0C0;border-style:none;color:#efefef;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII=");background-position:0 100px;text-decoration:none;}
ul#egytricks span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#egytricks ul li:hover>a,ul#egytricks ul li a.pressed{
background-color:#FFF;background-image:none;border-style:solid;border-color:#D9D9D9;color:#58ad41;text-decoration:none;}
ul#egytricks li.topfirst>a{
border-radius:4px 0 0 4px;-moz-border-radius:4px 0 0 4px;-webkit-border-radius:4px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;text-shadow:#d8d8d8 0px 1px 1px;}
ul#egytricks li.topfirst:hover>a,ul#egytricks li.topfirst a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#egytricks li.topmenu>a{
text-shadow:#d8d8d8 0px 1px 1px;}
ul#egytricks li.topmenu:hover>a,ul#egytricks li.topmenu a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#egytricks li.toplast>a{
border-radius:0 4px 4px 0;-moz-border-radius:0 4px 4px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;text-shadow:#d8d8d8 0px 1px 1px;}
ul#egytricks li.toplast:hover>a,ul#egytricks li.toplast a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#egytricks _>li>a{
padding:0;}
ul#egytricks li.subfirst>a{
border-width:0;border-style:none;padding:0;}
ul#egytricks li.subfirst:hover>a,ul#egytricks li.subfirst a.pressed{
border-style:none;}

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.

• Login to Blogger  >> Click on drop down >> Now select "Layout"
• Now you will see "Add a Gadget" button click any of them
• A new window will open .Scroll some down until you see " HTML/JavaScript" Button.
• Click on " HTML/JavaScript" Button ,leave the Title blank and Put the below code in Content and then after click on save button.

<ul id="egytricks" class="topmenu">
<li class="topfirst"><a href="#" style="height:15px;line-height:15px;">EgyTricks Menu 0</a></li>
<li class="topmenu"><a href="#" style="height:15px;line-height:15px;"><span>EgyTricks Menu 1</span></a>
<ul>
<li class="subfirst"><a href="#">Item 1 0</a></li>
<li><a href="#">Item 1 1</a></li>
<li><a href="#">Item 1 2</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:15px;line-height:15px;">EgyTricks Menu 2</a></li>
<li class="toplast"><a href="#" style="height:15px;line-height:15px;">EgyTricks Menu 3</a></li>
</ul>

Customization

• Replace #  and text with yours 

Now all done if have any question or Problem according to this Menu then Comment below