Awesome White Drop Down Menu For Blogger

White Drop Down Menu For Blogger

This is a very beautiful CSS3 White Menu bar for Blogger Blog.Created by Egytricks for all Blogger User who want a Pearl White Menu for their Blog.this menu has pretty color combination of white and black.with rounded corner.

Below i will tell how to Add this Menu to your Blog with step by step tutorial..

CSS EFFECT..

Now 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 ]]></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:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#egytricks ul{
display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;background-color:#424542;border-width:2px;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#FFF;padding:0 10px 10px;}
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 ul ul{
position:absolute;left:100%;top:0;}
ul#egytricks{
font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;
*display:inline;}
* html ul#egytricks li a{
display:inline-block;}
ul#egytricks>li{
margin: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:14px Trebuchet MS;color:#000;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#444444;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA4pKJyhkvMAAABsSURBVCjP7ZFBCoAwEAOn6+f8/088eWmNB2EhpVXPYg9Dkt2WQpC0BaAASHWk6mzzrEMb2OZ3O3vMsvCn8A+VwWC0h6sp4nnlM0DSGsCeWfV6qldRfVAHe+2286se3h5JJUspiQhg8Ywfr3ACj/VHLxipLh8AAAAASUVORK5CYII=");background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
ul#egytricks ul li{
float:none;margin:10px 0 0;}
ul#egytricks ul a{
text-align:center;padding:4px;background-color:#424542;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:14px Tahoma;color:#FFF;text-decoration:none;text-shadow:#FFF 0 0 0;}
ul#egytricks li:hover>a,ul#egytricks li a.pressed{
background-color:#444444;border-color:#C0C0C0;border-style:solid;color:#FFF;text-shadow:#FFF 0 0 1px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA4pKJyhkvMAAABsSURBVCjP7ZFBCoAwEAOn6+f8/088eWmNB2EhpVXPYg9Dkt2WQpC0BaAASHWk6mzzrEMb2OZ3O3vMsvCn8A+VwWC0h6sp4nnlM0DSGsCeWfV6qldRfVAHe+2286se3h5JJUspiQhg8Ywfr3ACj/VHLxipLh8AAAAASUVORK5CYII=");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 span{
background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAAFCAYAAADWkcYlAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wBFwsaEPhJNTwAAABfSURBVHja7dqxDQAxDAMxOfvv7G9iIAt80pAjqDtA1d3ZOkmqqgIAAAD8qneQT4evM86TiHMAAAC4YMJ8Qn2JcwAAAHgf6esI8zYNAAAA3HPe3OfiLtIBAADgUZwnyQeivhwKKt7BhQAAAABJRU5ErkJggg==");padding-right:8px;}
ul#egytricks ul li:hover>a,ul#egytricks ul li a.pressed{
background-color:#424542;background-image:none;color:#F2B20E;text-decoration:none;text-shadow:#FFF 0 0 0;}
ul#egytricks li.topfirst>a{
border-width:0;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;}
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;}

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:18px;line-height:18px;">Item 1 1 0</a></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;"><span>Item 1</span></a>
<ul>
<li><a href="#">Item 1 0</a></li>
<li><a href="#"><span>Item 1 1</span></a>
<ul>
<li><a href="#">Item 1 1 0</a></li>
</ul></li>
<li><a href="#">Item 1 2</a></li>
</ul></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 2</a></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 3</a></li>
<li class="topmenu"><a href="#" style="height:18px;line-height:18px;">Item 4</a></li>
<li class="toplast"><a href="#" style="height:18px;line-height:18px;">Item 5</a></li>
</ul>

Customization

• Replace the links in menu code # to yours Links
• and text name Item to your link text name

Now all done if have any question or Problem according to this White Drop Down css Navigation Menu for Blogger then Comment below