Using CSS for mouse-over effects

The following is a follow-on to Jason Edelman's fine tutorial. (Also see listomatic.)

Here's what I want:

This is a pretty basic application of ID selectors and that nutty img() function in CSS. Even though you could view the source of the is page to see how it's done, I'll just escape it here for the lazy:

<style type="text/css">

#nav { 

        width: 300px;

	font-size: 12px;

	line-height: 20px;

}



#nav UL {

	list-style-type: none;

 	margin: 0;

	padding: 0;

} 



#nav LI {

	width: 100px;

	background: #DDD;

	background-image: none;

	list-style-type: none;

  	margin: 0;

  	padding: 0;

	

}



#nav A {

	width: 100px;

	display: block;

}



#nav A:hover {

	color: #CC3;

	background: #CFC; 

	background-image: url(img/arrows.gif);

	background-repeat: no-repeat;

	background-position: right;

}



</style>

<ul id="nav">

  <li><a href="first.html">First item</a></li>

  <li><a href="second.html">Second item</a></li>

</ul>

Notice that the width for the #nav A element and the #nav LI element should agree. I wish there were a more generic way of setting this size (I suppose some fancy javascript could do it), but since I intend to use this for navigational stuff, this is just fine for me.

This code was tested in IE and Firefox.