New Beautiful Red CSS Menu for Blogger

This is a Red CSS Menu Bar for Blogger .

In this Post I am going to tell you how to add a beautiful Red CSS menu Bar for Blogger you can also add it WordPress or any site with your skill.
To add this Red CSS menu to Blogger .Use below Trick...

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

h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
margin:0;
padding:0;
}

hr {
border:none;
border-top:1px solid #CCCCCC;
height:1px;
margin-bottom:25px;
}

#foxmenucontainer{
height:24px;
background:#000;
display:block;
padding:25px 0 0 15px;
}

#foxmenu{
position:relative;
display:block;
height:24px;
font-size:11px;
font-weight:bold;
font-family:Arial,Verdana,Helvitica,sans-serif;
}

#foxmenu ul{
margin:0px;
padding:0;
list-style-type:none;
width:auto;
}

#foxmenu ul li{
display:block;
float:left;
margin:0 1px 0 0;
}

#foxmenu ul li a{
display:block;
float:left;
color:#fff;
text-decoration:none;
padding:5px 20px 0 20px;
height:19px;
background:transparent url(foxmenu_bg-OFF.gif) no-repeat top left;
}

#foxmenu ul li a:hover{
color:#fff;
background:transparent url(foxmenu_bg-OVER.gif) no-repeat top right;
}

#foxmenu ul li a.current,#foxmenu ul li a.current:hover{
color:#000;
background:#fff;

}

HTML(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 id="foxmenucontainer">
  <div id="foxmenu">
    <ul>
      <li><a href="http://www.egytricks.com/" class="current"><span>Link 1</span></a></li>
      <li><a href="http://www.egytricks.com/"><span>Link 2</span></a></li>
      <li><a href="http://www.egytricks.com/"><span>Link 3</span></a></li>
      <li><a href="http://www.egytricks.com/" title="Free CSS Menus"><span>Free CSS Menus</span></a></li>
      <li><a href="http://www.egytricks.com/"><span>Link 5</span></a></li>
      <li><a href="http://www.egytricks.com/"><span>Link 6</span></a></li>
      <li><a rel="nofollow" target="_blank" href=""http://www.egytricks.com/" title="egytricks.com"><span>egytricks</span></a></li>
    </ul>
  </div>
</div>

Replace Links and Text according to your need .
Now All Done...Comment If any Problem or Question