20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

CSS Underline Hover Effect Navigation Menu Bar

Underline CSS Hover Effect Navigation Menu Bar for blogger blgospot,best navigation menu bar for website with underline hover effect green colour bar simple and clean menu.
Underline CSS  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!

Post a Comment