Navigation list with bullet and background color change using just css - possible?

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/

Answer 2

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

I find this to be false. Look: http://jsfiddle.net/dbugger/4PUFa/

You are probably using twice the shorthand "background", and not know that this the second abckground will invalidate ALL the seeting of the first one.