Question

In order to properly place a bullet image on each navigation li element we normally use the background property to place it.

If however, we wish to, also, add a background change to the list, we should set our anchors inside li to have “display:block;”

Problem:
Once we add “display:block” to our element and we set a background color, our bullet will vanish.

What is the best way to have a menu that will:
Change the background color when the user overs it,
but that doesn’t also loose the bullet ?

Update:
Please take into consideration the following code:
http://jsfiddle.net/4PUFa/1/

k. regards

Answer 1

You should not be using the background property for list bullets. You should be using this:

   ul { list-style-image: url(path/yourImage.gif); }

which still leaves background for background work.

EDIT: For a right image (per your comment), I can make two possible suggestions, but only one will work for IE7, so I will offer that only:

Put the bullet in the background of the a tag and change the color on the li.

Like so: http://jsfiddle.net/4PUFa/3/