Vertical Hover Effect Css3 Menu Bar For Blogger

In this tutorial im gonna explain how to add vertical hover effect Css3 menu bar for your blog. You can  change your color as your like. Im using juts Css3  and HTML for these menu bar. In this tutorial You can get my all menu bar here

 1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here bloggertrix.com */

ul li {
background:#000;
list-style: none;
height: 44px;
float:left;
padding:10px 5px;
}
ul li a {
width: 175px;
height: 40px;
line-height: 53px;
border-bottom: 4px solid #636393;
padding:0px;
color: #fff;
font-size:18px;
font-weight:lighter;
text-align:center;
text-decoration: none;
display: block;
-webkit-transition: .2s all linear;
-moz-transition: .2s all linear;
-o-transition: .2s all linear;
transition: .2s all linear;
}
li:nth-child(1) a {
border-color: #636393;
}
li:nth-child(2) a {
border-color: #B5222D;
}
li:nth-child(3) a {
border-color: #D4953C;
}
li:nth-child(4) a {
border-color: #609491;
}
li:nth-child(5) a {
border-color: #87A248;
}
li:nth-child(1) a:hover {
border-bottom: 35px solid #636393;
height: 9px;
}
li:nth-child(2) a:hover {
border-bottom: 35px solid #B5222D;
height: 9px;
}
li:nth-child(3) a:hover {
border-bottom: 35px solid #D4953C;
height: 9px;
}
li:nth-child(4) a:hover {
border-bottom: 35px solid #609491;
height: 9px;
}
li:nth-child(5) a:hover {
border-bottom: 35px solid #87A248;
height: 9px;
}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<ul id="nav">
 <li class="home"><a href="#">Home</a></li>
 <li class="tutorials"><a href="#">Tutorials</a></li>
 <li class="about"><a href="#">Coding</a></li>
 <li class="news"><a href="#">WordPress</a></li>
 <li class="contact"><a href="#">Contact</a></li>
</ul>

Replace # with your links.

10. Now save your HTML/Javascript'.

    You are done...