JSFiddle - React, Tailwind, and code Playground

by stvolkilla

HTML

<div id="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Contacts</a></li>
    <li><a href="#">Telephone</a></li>
  </ul>
</div>

CSS

#menu {
  height: 49px;
  background: url(http://s18.postimg.org/j9iiqm1jd/bg_menu.jpg) no-repeat;
}

#menu ul {
  padding: 0;
}

#menu li {
  float: left;
  list-style: none;
}

a {
  text-transform: uppercase;
  padding: 0 15px;
  text-decoration: none;
  color: #ebebeb;
  display: block;
  height: 49px;
  line-height: 50px;
}

a:hover {
  background: url(http://s20.postimg.org/afbzsu2mx/hover.png) repeat-x;
}