CodePen

HTML

            
              <nav class="group">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Recommended</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>  
            
          
!

CSS

            
              .group:after {
  content: "";
  display: table;
  clear: both;
}

nav {
  width:960px;
  margin:0px auto;
}

ul {
  padding-left:75px;
}

li {
  background-color:red;
  background-image:url(http://lorempixel.com/output/nature-q-c-200-50-3.jpg);
  background-repeat:no-repeat;
  float:left;
  background-position: center bottom;
  background-size: 100% 50px ;
  padding-bottom: 20px;
  margin:0 25px;
}

a {
  background:red;
  padding: 0 25px 10px;
  height:3em;
  line-height:50px;
  text-align:center;
  text-decoration:none;
  color:white;
  font-weight:bold;
}



  
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................