Stylish Lite Blue CSS Menu Bar For Blogger

This post is also about CSS menu bar, It Includes with nice lite blue hover color. Iam using CSS and HTML for this menu.
You can add this easily.Check below for
demo.you can get similar menu bar from
here.

1. 1. Go to your blog's Edit HTML option.
2. Find this code  by using Ctrl+F  ]]></b:skin>
3. Paste below code Before ]]></b:skin> code.

/* Koooltrix.blogspot.com  */
#menu2{
    width:90%;
    margin:25px auto;
}
#menu2 ul{
    list-style:none;
}
#menu2 li{
    display:block;
    float:left;
}
#menu2 li a{
    background:#e4e8eb url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOPM6M7c32u1obAbD6eX5lHofp50S9d-J8fM04mq_T0rprSIy2rmcvlzpC1FQFLbcio88tUN3-ZW9NyonrQwNaySSUjck5CXYOXUqhWAgFlbHNDOZ05VDkul9L4fF8f77Xj6veOghvess/s1600/menu_bg.gif) repeat-x;
    border:2px solid #bdc5cd;
    margin:0 1px;
    padding:15px 15px 15px 15px;
    display:block;
    float:left;
    color:#2b61a1;
    text-transform:uppercase;
    text-decoration:none;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-size:13px;
    font-weight:bold;
    height: 30px;
}
#menu2 li a span{
    color:#636363;
    font-size:10px;
    text-transform:lowercase;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-weight:normal;
}
#menu2 li a:hover{
    background:#e46825 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiffhK1VOLD_eBOSIA6uBHh5bFloMF_32xBzBR8G1a2365nOd7omp2rFjSoqQuUw3XiaKlkN9Ktgar0JORS2eS7-7VzS9c5FuMP1f-uzyuzdfyeBJyNKgwqCHtB8bXVagPgiRGOwZ4f0Ek/s1600/menu_hover.gif) repeat-x;
    border:2px solid #4a88ce;
    text-decoration:none;
}
#menu2 li a:hover span{
    color:#636363;

}
.current{
    background:#74befd url(images/menu_hover.gif) repeat-x;
    border:2px solid #4a88ce;
    margin:0 1px;
    padding:15px 15px 15px 15px;
    display:block;
    float:left;
    color:#2b61a1;
    text-transform:uppercase;
    text-decoration:none;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-size:13px;
    cursor:pointer;
    font-weight:bold;
    height: 30px;
}
.current span{
    color:#636363;
    font-size:10px;
    text-transform:lowercase;
    font-family:Geneva, Arial, Helvetica, sans-serif;
    font-weight:normal;
}

1. Go to Layout option.
2. Add 'HTML/Javascript" gadget.
3. Paste below code in it.

<div id="menu2">
<ul>
<li class="current">Home<br />home page</li>
<li><a href="#">About Us<br />about us page</a></li>
<li><a href="#">Products<br />products page</a></li>
<li><a href="#">Partners<br />partners page</a></li>
<li><a href="http://koooltrix.blogspot.com/">Contact Us<br />contact page</a></li>
</ul>
</div>

 *ReplaceURLs as your like.

Now save it and you have done...

Enjoy !!!