I want to create a navigation which got divider between each list element.

Here is a simple HTML/CSS Code/Template :

<nav>
      <ul>
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
            <li><a href="#">D</a></li>
            <li><a href="#">E</a></li>
      </ul>        
</nav>

nav ul {
  list-style:none;
  float:right;
}

nav ul li {
float:left;
padding-left:10px;
}

nav ul li a {
  color:#111;
  font-family:Verdana;
  font-size:15px;
  text-decoration:none;
}

nav ul li a:hover {
  color:#9F3039;
}

so just a simple looking navigation which floats from the right side on a logo which is not displayed in the code here. Now I want to at devider between each link - I know I could do it with border-right and just use another class on my last listelement which set the border-right off, BUT I want to use a special kind of divider - an image.

How can I do it best ?