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

Hello all,

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 on hover background color 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 ?

Please take into consideration the following example of the intended result:

k. regards

1/ CSS:

<style type=“text/css”>
.ulcss {
.ulcss li{
background: url(images/arrow.png) left no-repeat;

.ulcss li a:hover{
background: url(images/nav1.png);


2/ html

<ul class=“ulcss”>
<li><a href=“”>Pedi Spa</a></li>
<li><a href=“”>Pedicure Spas</a></li>
<li><a href=“#”>item3</a></li>
<li><a href=“#”>item4</a></li>
<li><a href=“#”>item5</a></li>

I have applied this code to

Good luck

lezonspa and all

I found another request, and I’m really sorry for not being able to say that earlier:
We also need to change the text color.

Please note that it seems that we cannot use a:hover because if we move our mouse near the padding area, we will have the text color with the wrong background color.
Please have a look:

Thanks a lot

Hopefully I understood your quandary correctly.

It’s really a simple trick based on manipulating the margins and padding of the UL and LI , and LI A elements .

I explain the math, roughly in the following example. I used the default text bullet and px as my units; normally I wouldn’t use px with default text but I wanted to make the math as transparent as possible for this example.

If you are using list-style-image i would stick with px and figure the width of the image into the calculations, else I would recommend using ems


		<style type="text/css">
.nav, .nav li {padding:0; margin:0} /*resetting defaults, you may have done this for yur general css alread*/
				width: 250px; 
				padding-left:20px; /*this value + .nav li {margin-left } = .nav li a{ margin-left} x -1*/
				border:1px solid #000;
.nav li{margin-left:10px; /*helps put bullest within the UL  block*/}
.nav li  a {display:block;
			padding-left:30px;/* use this and following rule to contol distance of bullet from text */
			margin-left:-30px;/* use this to contol distance of bullet from text*/
.nav li:hover, .nav li:hover a  {color:red; background: pink}
<ul class="nav">
	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
	<li><a href="#">item</a></li>
	<li><a href="#">item longer sample item</a></li>
	<li><a href="#">item</a></li>

hope this helps

Thanks a lot.

I end up with something like:

Actually the issue was border related and NOT padding related.