JSFiddle - React, Tailwind, and code Playground

by AshThakur

HTML

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<ul id="menu">                 
<li><a href="http://lordhtml.blogspot.in/">Home</a></li>                                
<li><a href="http://lordhtml.blogspot.in/p/about-us.html">About</a></li>                 
<li><a href="http://lordhtml.blogspot.in/p/contact.html">Contact</a></li>    
<li><a href="http://lordhtml.blogspot.in/">Back To Tutorial</a></li>      
</ul>

CSS

#menu li {
display: inline;
list-style: none;
padding: 0;
}
#menu li a {
border: 1px solid #3d8bf2;
padding: 15px 20px 15px 20px;
text-decoration: none;
font-family: 'Acme', sans-serif;
color:#fff;
margin-left: -5px;
background-image: url('http://onlinetrick-ot.googlecode.com/svn/image/menubg2.PNG');
background-position: bottom;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
}
#menu li a:hover {
background-position:top;
}