CodePen

HTML

            
              <nav class="nav">
   <ul>
     <li class=
     "home" ><a class="active" href="http://www.google.com">Home</a></li>
     <li class=
       "food" ><a href="http://www.google.com">Our Food</a></li>
     <li class=
       "about" ><a href="http://www.google.com">About</a></li>
     <li class=
       "deals" ><a href="http://www.google.com">Deals</a></li>
     <li class=
       "contact" ><a href="http://www.google.com">Contact</a></li>
   </ul>
</nav>
            
          
!

CSS

            
              nav {
  width:970px;
  margin:0 auto;
  background:#bada55;
  padding-top:15px;
  }

ul {
  text-align:center;

}

ul li {
  list-style:none;
  display:inline-block;
  margin:3%;
  position:relative;
}

a {
  width:105px;
  height:95px;
  background:red;
  display:block;
  line-height:75px;
  text-align:center;
  border:2px solid white;
  color:white;
  text-decoration:none;
}

a.active, a:hover, a:focus, a:active {
  box-shadow:0px 4px 10px black;
}

a:after {
  content:"";
  width:75px;
  height:75px;
  display:block;
  margin: 0 auto;
  position:relative;
  top:-115px;
  border-radius:45px;
  border:5px solid white;
}

a.active:after {
  box-shadow:0px 4px 10px black;
}

a:hover:after {
  box-shadow:0px 2px 5px black;
}


.home a:after {
  background-image: url(http://lorempixel.com/output/abstract-q-c-50-50-7.jpg);
}
  
.food a:after  {
  background-image: url(http://lorempixel.com/output/food-q-c-50-50-7.jpg);
}

.about a:after  {
  background-image: url(http://lorempixel.com/output/people-q-c-50-50-7.jpg);
}

.deals a:after {
  background-image: url(http://lorempixel.com/output/sports-q-c-50-50-7.jpg);
}

.contact a:after  {
  background-image: url(http://lorempixel.com/output/fashion-q-c-50-50-7.jpg);
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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