Problema con botonera superpuesta (hover y href)

[Damkiri]

Hola comunidad recurro a ustedes por que no pude encontrar por ninguna parte una solucion o alguien con mi mismo problema.
No se como explicarlo bien es por eso que les adjunto un printscreen de la web que estoy realizando y de dicho problema .



dentro del sidebar cada solapa esta creada con una imagen png el problema esta en que el area rectangular roja me impide hacer over en la seccion fotos mejor dicho en la mitad de la seccion fotos a su vez fotos impide hacer over en profesor y asi!.
se puede solucionar de alguna forma sin tener que modificar el diseño?
desde ya muchisimas gracias!!!

PD: Les adjunto parte del codigo html y css para que se entienda un poco mejor:

Código HTML:

 <div id="sidebar">
	<ul>
	<li class="principal"><h2><a href='index.php'>Principal</a></h2></li>
	<li class="fotos"><h2><a href='fotos.php'>Fotos</a></h2></li>
	<li class="profesor"><h2><a href='profesor.php'>Profesor</a></h2></li>
	<li class="contacto"><h2><a href='contacto.php'>Contacto</a></h2></li>
        </ul> 

y aca un ejemplo de los atributos usados en CSS:
.principal {
background-image: url("../imagenes/botonera_principal.png");
background-repeat: no-repeat;
height: 264px;
line-height: 888px;
margin-left: 52px;
margin-top: 58px;
overflow: hidden;
position: relative;
width: 155px;
z-index: 4;
cursor: pointer;

[jomaruro]

Hola:

Quizá te sirva esta información: Mapas de imagen.

Saludos.

[Damkiri]

Muchas gracias por tu respuesta jomaruro! creo que es lo que necesito, lamentablemente no esta funcionando. sera que estoy redactando mal el codigo??.
saludos y gracias!!

<ul>
<li class="principal">
<img src="imagenes/botonera_principal.png" usemap="#principal" />
<map name="principal"> <area shape="poly"
coords="66,0,11,18,4,26,0,41,4,52,67,268,68,253,69 ,5" href="principal.php"
/>
</map>
</li>
</ul>

.principal {
background-repeat: no-repeat;
cursor: pointer;
height: 258px;
margin-left: 54px;
margin-top: 58px;
overflow: hidden;
position: relative;
width: 66px;
z-index: 24;

}

.principal img:hover {
background-image: url("../imagenes/botonera_principal_over.png");
cursor: pointer;
height: 258px;
margin-left: 54px;
margin-top: -261px;
overflow: hidden;
position: relative;
width: 66px;
z-index: 24;


}