Vertical Hover Effect Css3 Menu Bar For Blogger

In this tutorial i'm 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














Step1: Go to blogger and login

Step2:  Go to blogger and click Layout






Step3: Click Add Gadget and select 'HTML/Javascript


Step4: Copy and paste the code
ul li { background:#000; list-style: none; height: 40px; float:left; padding: 10px; } ul li a { width: 175px; height: 40px; line-height: 53px; border-bottom: 4px solid #ddd; padding:0px; color: #fff; font-family: segoe ui light; font-size:18px; text-align:center; text-decoration: none; display: block; -webkit-transition: .2s all linear; } li:nth-child(1) a { border-color: #AC193D; } li:nth-child(2) a { border-color: #643EBF; } li:nth-child(3) a { border-color: #8C0095; } li:nth-child(4) a { border-color: #2E8DEF; } li:nth-child(5) a { border-color: #008299; } li:nth-child(1) a:hover { border-bottom: 35px solid #AC193D; height: 9px; } li:nth-child(2) a:hover { border-bottom: 35px solid #643EBF; height: 9px; } li:nth-child(3) a:hover { border-bottom: 35px solid #8C0095; height: 9px; } li:nth-child(4) a:hover { border-bottom: 35px solid #2E8DEF; height: 9px; } li:nth-child(5) a:hover { border-bottom: 35px solid #008299; height: 9px; } </style> <ul id="nav"> <li class="home"><a href="http://www.blogger.com/blogger.g?blogID=5069636614058806919#">Home</a></li> <li class="tutorials"><a href="http://www.blogger.com/blogger.g?blogID=5069636614058806919#">Tutorials</a></li> <li class="about"><a href="http://www.blogger.com/blogger.g?blogID=5069636614058806919#">Coding</a></li> <li class="news"><a href="http://www.blogger.com/blogger.g?blogID=5069636614058806919#">WordPress</a></li> <li class="contact"><a href="http://www.blogger.com/blogger.g?blogID=5069636614058806919#">Contact</a></li> </ul> <span style="font-size: 12.0pt; line-height: 115%;">Step5:<o:p></o:p></span> <span style="font-size: 12.0pt; line-height: 115%;">Replace # with your links.<o:p></o:p></span> <span style="font-size: 12.0pt; line-height: 115%;">And Now save your HTML/Javascript'.<o:p></o:p></span>
Step5:
         Save Your "HTML/Javascript"