CODEWITHSUNDEEP
csshtml-lists
MEM
MEM

Reputation: 31337

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

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

Upvotes: 0

Views: 1019

Answers (2)

ScottS
ScottS

Reputation: 72261

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/

Upvotes: 2

Enrique Moreno Tent
Enrique Moreno Tent

Reputation: 25267

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.

Upvotes: 0

Related Questions