Great Underline Hover Effect Menu for Blogger

You may have seen some great navigation menu in some blog and websites. So, today I am about to say how to create a simple but amazing CSS Menu.

DEMO

Paste the following CSS Code before ]]></b:skin>

.

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

Now Add a Gadget and Insert the following HTML Code for the Menu .

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Nepali Lab</a>
    </li>
<li><a href="#">Training</a></li>
<li><a href="#">Placement</a></li>
<li><a href="#">Press</a></li>
<li><a href="http://www.nepalilab.blogspot.com/">Contact Us</a></li>
<li><a href="#">Gallery</a></li>
</ul>