Zone cliquable en CSS

Bonjour,

Si vous regardez bien le menu de mon site, il est circulaire :
http://www.balistiq.fr
C'est certes joli mais des fois, j'ai remarqué que ça posait problème quand on passe le curseur de la souris sur les boutons car ces derniers semblent se superposer et ce, malgré tout le soin que j'ai apporté à la découpe du menu.
J'ai mis un Z-index de 11 pour tous les menu comme ça, ils sont bien à un niveau très nettement supérieur au reste du site.

J'imagine qu'en créant des zones de textes bien découpées en utilisant une balise de type "map area", je devrait arriver à tirer mon épingle du jeu mais je voulais savoir si en CSS, il y avait moyen de faire ça proprement.

Voici mon code CSS pour un bouton :

Code:

1
2
3
4
5
6
7
8
9
 
#boutique{
	float:left;
	top:-207px;
	left:315px;
	position: relative;
	background-repeat: no-repeat;
	z-index: 11;
}

Voici le code de mon menu :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<div id="menu">
    <div id="boutique">
    <a href="{PATH}{LIEN_ITEM3}" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('boutique','','{PATH}templates/{THEME_GRAPHIQUE}/images/boutons/boutique-over.png',1)" class="boutique"><img src="{PATH}templates/{THEME_GRAPHIQUE}/images/boutons/boutique{IMAGE_STYLE3}.png" name="boutique" alt="Boutique" title="Boutique" width="125" height="197" border="0"/></a></div>
 
    <div id="bonus">
    <a href="{PATH}{LIEN_ITEM27}" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('bonus','','{PATH}templates/{THEME_GRAPHIQUE}/images/boutons/bonus-over.png',1)" class="bonus"><img src="{PATH}templates/{THEME_GRAPHIQUE}/images/boutons/bonus{IMAGE_STYLE27}.png" name="bonus" alt="Bonus" title="Bonus" width="233" height="86" border="0"/></a></div>
 
    <div id="podcasts">
    <a href="{PATH}{LIEN_ITEM22}" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('podcasts','','{PATH}templates/{THEME_GRAPHIQUE}/images/boutons/podcasts-over.png',1)" class="podcasts"><img src="{PATH}templates/{THEME_GRAPHIQUE}/images/boutons/podcasts{IMAGE_STYLE22}.png" name="podcasts" alt="Les podcasts" title="Les podcasts" width="58" height="177" border="0"/></a></div>
 
    <div id="programmes">
    <a href="{PATH}{LIEN_ITEM6}" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('programmes','','{PATH}templates/{THEME_GRAPHIQUE}/images/boutons/programmes-over.png',1)" class="programmes"><img src="{PATH}templates/{THEME_GRAPHIQUE}/images/boutons/programmes{IMAGE_STYLE6}.png" name="programmes" alt="Programmes" title="Programmes" width="208" height="89" border="0"/></a></div>
 
    <div id="radio">
    <a href="{PATH}{LIEN_ITEM30}" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('radio','','{PATH}templates/{THEME_GRAPHIQUE}/images/boutons/radio-over.png',1)" class="radio"><img src="{PATH}templates/{THEME_GRAPHIQUE}/images/boutons/radio{IMAGE_STYLE30}.png" name="radio" alt="La radio" title="La radio" width="150" height="155" border="0"/></a></div>
 
    <div id="logo"></div>
</div>

Avez-vous une solution à m'apporte sachant que j'ai l'intention d'ajouter un sous menu à l'avenir pour le bouton "bonus" que je veux oblique dans un soucis d'esthétique.

Merci d'avance pour votre aide.