New Blogger Black Css Multi Drop down Menu

This is a new Navigation Menu for Blogger with Classic professional Stylist look.we all know that what is importance of a navigation menu in any Blog or Site.it doesn't only help your user's to get their desire content easily but also help you decrease the bounce rate of any site or blog.

How to Add the above Black Css Multi Drop down Menu to Blogger.  

Follow My Step by Steps Instruction to add this Menu to blogger site.

1. go and loging in blogger >>then go to your blogger dashboard and Click on Themplate.
2. Now you will see a " Edit HTML" button Click on it
3. Then Find the ]]></b:skin>
4. And copy the Below code and Paste Just Above the ]]></b:skin>

ul#EgyTrickmenu,ul#EgyTrickmenu ul{
margin:0;list-style:none;padding:0;background-color:#000;background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCkqMDD-5jNws2B5fSM6XTK-TJs4BZaSldv46LyP_HFAIANokgIjp3Tly_WbPWS6yR7SvPNU1eJQD5kigXh4wzrzW9dmMX0sHn68M0bOoSivpn_etn9l1We-YbYb0elWrheyP-S-exVHo/s1600/mainbk.png");background-repeat:repeat;border-width:0px;border-style:solid;border-color:#999999;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
ul#EgyTrickmenu 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:#333;background-image:none;border-width:1px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border-style:solid;border-color:#5A5E60;padding:0 9px 9px;}
ul#EgyTrickmenu li:hover>*{
display:block;}
ul#EgyTrickmenu li{
position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#EgyTrickmenu li:hover{
z-index:1;}
ul#EgyTrickmenu ul ul{
position:absolute;left:100%;top:0;}
ul#EgyTrickmenu{
font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:1px 1px 1px 0;
*display:inline;}
* html ul#EgyTrickmenu li a{
display:inline-block;}
ul#EgyTrickmenu>li{
margin:0 0 0 1px;}
ul#EgyTrickmenu ul>li{
margin:1px 0 0;}
ul#EgyTrickmenu a:active, ul#EgyTrickmenu a:focus{
outline-style:none;}
ul#EgyTrickmenu a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px Arial;color:#cccccc;cursor:default;padding:10px;background-color:#333;background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCkqMDD-5jNws2B5fSM6XTK-TJs4BZaSldv46LyP_HFAIANokgIjp3Tly_WbPWS6yR7SvPNU1eJQD5kigXh4wzrzW9dmMX0sHn68M0bOoSivpn_etn9l1We-YbYb0elWrheyP-S-exVHo/s1600/mainbk.png");background-repeat:repeat;background-position:0 200px;border-width:0px;border-style:none;border-color:;}
ul#EgyTrickmenu ul li{
float:none;margin:9px 0 0;}
ul#EgyTrickmenu ul a{
text-align:left;padding:8px 0 0 0;background-color:#333;background-image:none;border-width:1px 0 0 0;border-style:solid;border-color:#262626;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:13px Arial;color:#cccccc;text-decoration:none;}
ul#EgyTrickmenu li:hover>a,ul#EgyTrickmenu li a.pressed{
background-color:#00c4ff;border-style:none;color:#ffffff;background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCkqMDD-5jNws2B5fSM6XTK-TJs4BZaSldv46LyP_HFAIANokgIjp3Tly_WbPWS6yR7SvPNU1eJQD5kigXh4wzrzW9dmMX0sHn68M0bOoSivpn_etn9l1We-YbYb0elWrheyP-S-exVHo/s1600/mainbk.png");background-position:0 100px;text-decoration:none;}
ul#EgyTrickmenu span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#EgyTrickmenu ul span{
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnuhJ_JL1qnQPQcExBsCV4OCsT7ir1IkbOLsB_kwg1e6wFqyt4R1dSq1UiAUUFDIkc4NZmAqRk_SRosq_YisxSY_Tq2VQE2xWsg-OdOp1jy_2b9k4pL1DvSM2fl60yS0pHqaKtFer4cXI/s1600/arrowsub.gif");padding-right:15px;}
ul#EgyTrickmenu ul li:hover>a,ul#EgyTrickmenu ul li a.pressed{
background-color:#333;background-image:none;border-style:solid;border-color:#262626;color:#1F80AE;text-decoration:none;}
ul#EgyTrickmenu 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:#000000 0px -1px 1px;}
ul#EgyTrickmenu li.topfirst:hover>a,ul#EgyTrickmenu li.topfirst a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#EgyTrickmenu li.topmenu>a{
text-shadow:#000000 0px -1px 1px;}
ul#EgyTrickmenu li.topmenu:hover>a,ul#EgyTrickmenu li.topmenu a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#EgyTrickmenu 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:#000000 0px -1px 1px;}
ul#EgyTrickmenu li.toplast:hover>a,ul#EgyTrickmenu li.toplast a.pressed{
text-shadow:#3d3d3d 0px -1px 1px;}
ul#EgyTrickmenu _>li>a{
padding:0;}
ul#EgyTrickmenu li.subfirst>a{
border-width:0;border-style:none;padding:0;}
ul#EgyTrickmenu li.subfirst:hover>a,ul#EgyTrickmenu li.subfirst a.pressed{
border-style:none;}

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

<ul id="EgyTrickmenu" 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 3</a></li>
<li><a href="#">Item 1 4</a></li>
<li><a href="#"><span>Item 1 5</span></a>
<ul>
<li class="subfirst"><a href="#">Item 1 5 0</a></li>
<li><a href="#">Item 1 5 1</a></li>
<li><a href="#">Item 1 5 2</a></li>
</ul></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="topmenu"><a href="#" style="height:15px;line-height:15px;">egytricks menu 3</a></li>
<li class="topmenu"><a href="#" style="height:15px;line-height:15px;">egytricks menu 4</a></li>
<li class="topmenu"><a href="#" style="height:15px;line-height:15px;">egytricks menu 5</a></li>
<li class="topmenu"><a href="#" style="height:15px;line-height:15px;">egytricks menu 6</a></li>
<li class="toplast"><a href="#" style="height:15px;line-height:15px;">egytricks menu 7</a></li>
<!-- End egytricks.com menu section -->

Replace all  # with your Link

Now all done .Enjoy.