Current page highlighting in a wordpress menu

Hi,

I hope thisn is the correct forum to post it.

I have this pages menu:

<ul class="nav">
<li<?php if ( is_home() ) { echo ' class="current_page_item"'; } ?>><a href="<?php echo get_option('home'); ?>"><span>Home</span></a></li>

<?php
	$pages = wp_list_pages('echo=0&title_li=');+
	$pages = str_replace('">', '"><span>', $pages);
	$pages = str_replace('<span><a', '<a', $pages);
	$pages = str_replace('</a>', '</span></a>', $pages);
	echo $pages;
?>
</ul>

PHP:

and the css rule:

ul {
padding: 5px;
margin: 4px 0 0 286px;
list-style: none;
float: left;
}
 
ul li {
float: left;
display: inline; /*For ignore double margin in IE6*/
margin: 0 11px 0 12px;
}
 
ul li a {
text-decoration: none;
float:left;
color: #fff;
font-family: Georgia, serif;
text-shadow: #000 1px 1px;
font-size: 18px;
}
 
ul li a span {
margin: 0 8px 5px -16px;
padding: 4px 8px 7px 16px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;
}

ul.nav li a.current_page_item, ul.nav li a:hover {
background: url(http://mywebsite.it/wp-content/themes/cmcc/img//bottone.png) no-repeat top right;
color: #fff;
}
 
ul.nav li a.current_page_item span, ul.nav li a:hover span {
background: url(http://mywebsite.it/wp-content/themes/cmcc/img//bottone.png) no-repeat top left;
}

Code (markup):

The effect in the menu for the current page would be:



but it doesn't work.

Any suggestion?
Thanks.