first_one

first

HTML

<div id="menu">
  <ul>
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Articles</a></li>
    <li><a href="#">Tech</a></li>
    <li><a href="#">Business</a></li>
    <li><a href="#">Entertainment</a></li>
  </ul>
</div>

CSS

a {
  font: 12px Arial, Tahoma, sans-serif;
  display: block;
  height: 50px;
  line-height: 50px;
  padding-left: 15px;
  padding-right: 15px;
  text-decoration: none;
  color: #ebebeb;
  text-transform: uppercase;
}

#menu {
  height: 50px;
  background: url(http://s18.postimg.org/j9iiqm1jd/bg_menu.jpg) no-repeat;
  width: 100%;
  border-top: 1px dashed #1c1c1c;
}
#menu ul {
  margin: 0;
}

#menu ul li {
  float: left;
  height: 100%;
  list-style: none;
}

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