Question

How can I add an image above the text in my navigation. It should be displayed ABOVE the text.

My HTML

<ul class="nav">
  <li class="whoweare"><a href="#">who we are</a></li>
  <li class="services"><a href="#">services</a></li>
  <li class="contact"><a href="#">contact</a></li>
</ul> 

My CSS

ul.nav {
  list-style: none; 
  border-top: 20px solid #FFF; 
}

ul.nav li {
  float: left;
  text-align:center;
  width: 23%;
}

Answer 1

See this fiddle http://jsfiddle.net/pixelass/YxkPz/

If you need the image to be clickable simply put it INSIDE the <a> tag

See it here: http://jsfiddle.net/pixelass/YxkPz/1/

The image needs to display:block;

HTML

<ul class="nav">
  <li class="whoweare"><img src="http://lorempixel.com/150/50/sports/9/"><a href="#">who we are</a></li>
  <li class="services"><img src="http://lorempixel.com/150/50/sports/4/"><a href="#">services</a></li>
  <li class="contact"><img src="http://lorempixel.com/150/50/sports/1/"><a href="#">contact</a></li>
</ul> 

CSS

ul.nav {
  list-style: none; 
  border-top: 20px solid #FFF; 
}

ul.nav li {
  float: left;
  text-align:center;
  width: 23%;

}
ul.nav li img{
  display:block;
}