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

HTML & CSS
1

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:
http://jsfiddle.net/4PUFa/1/

k. regards

2

1/ CSS:

<style type=“text/css”>
<!–
.ulcss {
display:block;
}
.ulcss li{
background: url(images/arrow.png) left no-repeat;
padding-left:20px;
list-style:none;
}

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

}
–>
</style>

2/ html

<ul class=“ulcss”>
<ul>
<li><a href=“http://lezonspa.com”>Pedi Spa</a></li>
<li><a href=“http://www.lcdeco.com/”>Pedicure Spas</a></li>
<li><a href=“#”>item3</a></li>
<li><a href=“#”>item4</a></li>
<li><a href=“#”>item5</a></li>
</ul>
</ul>

I have applied this code to lezonspa.com

Good luck

3

lezonspa and all

Update:
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: http://jsfiddle.net/4PUFa/5/

Thanks a lot

4

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
	<head>
		<title></title>
		<style type="text/css">
.nav, .nav li {padding:0; margin:0} /*resetting defaults, you may have done this for yur general css alread*/
.nav{
				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:10px;
			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}
		</style>
	</head>
	<body>
<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>
</ul>
	</body>
</html>

hope this helps

5

Thanks a lot.

I end up with something like:

Actually the issue was border related and NOT padding related.

Solved.