CSS Underline Hover Effect Navigation Menu Bar

I'm going to explain how to add CSS Underline Hover Effect navigation menu bar for Blogger.This Underline navigation menu bar is compatible with all browsers like IE10,Chrome,Safari,Firefrox etc.To add this Search Box Style CSS3 Navigation menu bar widget gadget for blogger website just follow the steps mentioned below.

How To Add CSS Underline Hover Effect Navigation Menu Bar

1. Log in to blogger account

2. Now select "Template"

3. Now Click EDIT HTML Button"

4. Find this tag by using Ctrl+F ]]></b:skin>

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

/* The CSS Code for the menu starts here bloggersstand.blogspot.com */
#arrowunderlinebloggersstand{
list-style-type:none;
margin:0;
padding:0;
text-align:center;
font: bold 16px Georgia;
}
#arrowunderlinebloggersstand li{
display:inline;
margin-right:25px;
}
#arrowunderlinebloggersstand li a{
position:relative;
color:black;
padding-bottom:8px;
text-decoration:none;
}
#arrowunderlinebloggersstand li a:hover{
border-bottom:3px solid #25bd0d;
}
#arrowunderlinebloggersstand 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;
}

6. Go to blogger and click Layout

7. Click Add Gadget and select 'HTML/Javascript

8. Paste below code.

<div id="arrowunderlinebloggersstand">
<ul>
<li><a href="#"><span>Home</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>

*Change All # With Your Links.

9. Now save your HTML/Javascript'. Done!