Botones con esquinas redondeadas y selectores CSS

[canon882]

Estimados,

Buen día. Vengo a Uds., porque tengo una duda. Les comento que recién voy produndizando en el CSS avanzado y se me ha presentado un "ligero" problema. Resulta que debo de hacer un menú que tenga los laterales semicirculares. Para esto, no debo de usar la propiedad "round-corner" de CSS, ya que debo de aplicar selectores. Asimismo, al hacer hover en dichos botones, se debe de cambiar de color de fondo. Lo he logrado, pero no de la manera que se debe. He logrado que se cambie el fondo, pero al poner el puntero sobre otro elemento y no sobre el botón en si. Acá les dejo el código CSS y HTML y un enlace donde pueden descargar mi ejemplo:

Enlance de descarga: www.fernandezramirez.com/forosdelweb/selectores.zip

Ejemplo:www.fernandezramirez.com/forosdelweb/selectores/

Mi CSS

Código HTML:

body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:21px;
}

a {
	text-decoration:none;
	font-weight:normal;
}

ul {
	list-style:none outside;
	margin:0px;
	padding:0px;
}

li {
	list-style:none outside;
	margin:0px 0px 0px 20px;
	padding:0px;
}

.left {
	display:block;
	float:left;
	width:15px;
	height:30px;
	background:url("menu_item_a_01.png");
}

.center {
	display:block;
	float:left;
	padding:5px 5px 4px 5px;
	background:#333;
	color:#fff;
}

.right {
	display:block;
	float:left;
	width:15px;
	height:30px;
	background:url("menu_item_a_02.png");
}

a:hover.menu + ul a span.left {
	background:url("menu_item_a_hover_01.png");
}

a:hover.menu + ul a span.center {
	background:#f60;
}

a:hover.menu + ul a span.right {
	background:url("menu_item_a_hover_02.png");
}

Mi HTML

Código HTML:

<a class="menu" href="#">lorem ipusm dolor sit amet</a>

<ul>
	<li>
    	<a href="#">
        <span class="left"></span>
        <span class="center">Centro</span>
        <span class="right"></span>
        </a>
    </li>
</ul>