JSFiddle - React, Tailwind, and code Playground

by Love Trivedi

HTML

<script src="&lt;link href=&#39;http://fonts.googleapis.com/css?family=Titillium+Web:700&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;&gt;"></script>
<body>
    <div id= "wrapper">
<div class="nav">
<ul>
    <li><a href="#">One</a></li>
    <li><a href="#">One</a></li>
    <li><a href="#">One</a></li>
    <li><a href="#">One</a></li>
    <li><a href="#">One</a></li>


</ul>

</div>
</div>
</body>
</html>

CSS

/** Centered **/
* { margin : 0 auto;padding : 0; } 
body {padding : 0;margin:0 auto;background: url(low_contrast_linen.png)repeat;}

#wrapper{background:grey;width:1000px;height:auto !important;min-height:100%;overflow:hidden; height: 100%;margin-top:0px;}

.nav{height:50px;width:510px;background:#2C2C2C;font-family: 'Titillium Web', sans-serif;text-align:center;font-size:30px;}
ul{display:inline;list-style-type:none;height:50px;}
ul li{background:#696969;width:100px;float:left;height:46px;line-height:40px;border-bottom:4px solid #2C2C2C;

-webkit-transition: border-color 1s ease;
         -moz-transition: border-color 1s ease;
           -o-transition: border-color 1s ease;
          -ms-transition: border-color 1s ease;
              transition: border-color 1s ease;    }

ul li:hover{background:url()#383434;border-bottom:4px solid red;}
ul li a{color: black;background:url(http://mwv3.webs.com/menu_hover.png)-20px bottom no-repeat;
    padding:0px 0px 9px 0px;width:100%;
		-webkit-transition: background .5s ease;
         -moz-transition: background .5s ease;
           -o-transition: background .5s ease;
          -ms-transition: background .5s ease;
              transition: background .5s ease;
    display:block;/*ADDED*/
}

ul li a:hover{

background:url(http://mwv3.webs.com/menu_hover.png) center bottom no-repeat; /*Changed*/
}

  a{text-decoration:none;}