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/
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>