Add Under Line Hover Navigation Menu Bar To Blogger

Last week while checking my one of my favourite blog on bloggertrix i stumbled upon this very beautiful navigation menu bar created by Sohan Jaysinghe, CEO of the very blog. He is expert in Css and also hides lot of talents inside his personality.
This is a simple navigation menu bar customized by using Css. This menu bar is compatible with latest updated version of web browser.

■ Open Blog Dashboard → Template → Html Editor
■ Find (pressing Ctrl+F) " ]]></b:skin> "
■ Add below code just above it.

CSS

#arrowunderline{
list-style-type:none;
margin:0;
padding:0;
text-align:center;
font: bold 16px Georgia;
}
#arrowunderline li{
display:inline;
margin-right:25px;
}
#arrowunderline li a{
position:relative;
color:black;
padding-bottom:8px;
text-decoration:none;
}
#arrowunderline li a:hover{
border-bottom:3px solid #25bd0d;
}
#arrowunderline li a:hover:after{
content:'';
width:0;
height:0;
position:absolute;
left:50%;
margin-left:-5px;
bottom: 0;
border-width:5px;
border-style:solid;
border-color: transparent transparent #25bd0d transparent;
}

■ Now find (pressing Ctrl+F) " <div class='main-wrapper'> "
■ Add below given code just above it.

HTML

<div id="arrowunderline">
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>
<li><a href="#"><span>Category//1</span></a></li>
<li><a href="#"><span>Category//2</span></a></li>
<li><a href="#"><span>Category//3</span></a></li>
<li><a href="#"><span>Category//4</span></a></li>
<li><a href="#"><span>Download</span></a></li>
<li><a href="#"><span>CSS</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact Us</span></a></li>
</ul>
</div>