Изображение в пределах класса LI

Question

Я пытаюсь получить мои изображения bullet-point.png для отображения в правой части каждого из параметров моего меню навигации/li.

Я сделал это с некоторыми действительными HTML5, но предпочел бы делать это правильно. Вот мой снимок экрана, прежде чем он объясняет, чем я занимаюсь. (Ранее я добавлял несколько строк в каждый пункт меню). Я думаю, что лучше, чтобы каждый пункт меню был присвоен классу с определенным фоном.

HTML/CSS ниже отображает навигацию, как на скриншот, но без какого-либо из пули точечных изображений. Любая идея почему?

HTML

<nav class="nav"> 
       <div class="span12"> 
        <ul> 
         <li class="bullet-point"><a href="#" class="active">HOME</a></li> 
         <li class="bullet-point"><a href="#">PROJECTS</a></li> 
         <li class="bullet-point"><a href="#">CASE STUDIES</a></li> 
         <li class="bullet-point"><a href="#">PROFILE</a></li> 
         <li class="bullet-point"><a href="#">NEWS &#38; EVENTS</a></li> 
         <li class="bullet-point"><a href="#">LOCATION</a></li> 
         <li class="bullet-point"><a href="#">CONTACT</a></li> 
        </ul> 
       </div> 
      </nav> 

CSS

.bullet-point { 
    margin-top: -5px; 
    margin-right: 10px; 
    background: url('img/bullet-point.png'); 
} 

Answer 1

Fiddle: http://jsfiddle.net/avinvarghese/eemTZ/

Css:

.bullet-point { 
     margin-top: -5px; 
     margin-right: 10px; 
     list-style:none; 
     float:left; 
    } 
    .bullet-point:after { 
     content:" • "; 
    } 
    .bullet-point:last-child:after { 
     content: ""; 
} 

Answer 2

Это должно быть

ul { 
    list-style-image: url('img/bullet-point.png'); 
} 

Фоновые изображения здесь не применимы.