How can I use CSS to put an image next to each menu item?

Question

I'm using Drupal 7.26 - I've created a menu and entered some links into the menu. I'm trying to style the menu now - it has output the links as a bulleted list.

I've styled the li element to give padding, margin, text colour and a background colour. I now have each menu item inside a blue box which is what I was looking for. However, I now need to take away the bullet points which are to the left and outside of the blue background of each menu item, and instead, inside the menu item background box, I need a background image placed to the left of the text.

My question is, how can I place the little image to the left of the text?

Thank you v much.

Answer 1

If I understand correctly,

li{
    list-style-position: inside;
    list-style-image: url('image/path/here');
}

if not, please post a fiddle.

The above code will style all li's in your page. to make it specific, use class names.
like ul.menu li..