Problème de menu rollover en CSS !

Bonjour j'ai un problème de rollover en css pour un menu qui affiche des éléments horizontalement :

Mon menu consiste à afficher au survol de vignette composé d'images (chiffres, services ect) un bloc sur la droite que j'arrive à afficher mais le problème c'est que lorsque je sors du rollover tout en restant dans la zone du bloc qui s'est affiché le rollover de chiffres disparait je vous montre en image :

http://img207.imageshack.us/f/39485478.jpg
http://img574.imageshack.us/f/57089121.jpg


La structure html :

<div id="menugauche">
		
			<div class="title">CABINET DE CONSULTING</div>
			<div id="blocgauche">
					
					<dl>
						<dt id="chiffres"><a href="#"></a></dt>
						<dd class="chiffres"><a href="#"></a></dd>
					</dl>
					<img class="separateur" src="bg/separateur_h.jpg">

					/* les autres puces sont faite sur le même modèle*/
			
			</div>
			
			
		</div>

#menugauche{

margin:18px 0 0 16px;
width:174px;
height:519px;
float:left;


}


#menugauche .title{

width:186px;
height:27px;
background:url(bg/bg_titre.jpg) no-repeat top left;
line-height:27px;
text-align:center;



}


#blocgauche{

background:url(bg/bg_blocgauche.jpg) no-repeat top left;
height:489px;
width:198px;
padding:0;
margin:0;
position:relative;

}

#blocgauche .separateur {


padding:-3px 0 0 0;
margin:0;
display:block;

}

#blocgauche dl {
padding:0px;
margin:0px;
display:block;
z-index:0;

}

#blocgauche dl dt {
padding:0px;
margin:0px;
display:block;
height:112px;
cursor:pointer;
}



#blocgauche dl dt#chiffres  a {
padding:0px;
margin:0px;
display:block;
background:url(img/chiffres_1.jpg) no-repeat bottom left;
width:186px;
height:112px;
}

#blocgauche dl dt#chiffres  a:hover {
padding:0px;
margin:0px;
display:block;
background:url(img/chiffres_1.jpg) no-repeat top left;
width:186px;
height:112px;

}


#blocgauche dl dd{
display:block;
top:0px;
margin:0px;
left:186px;
width:384px;
height:338px;
position:absolute;
}



#blocgauche dl dd{
display:none;

}

#blocgauche dl dt:hover dd{
display:block;


}


#blocgauche dl:hover dd.chiffres{
display:block;
background:url(bg/bg_fond_rollo_gauche.jpg) no-repeat top left;
width:570px;
height:338px;
}


#blocgauche ul li .lunalogic{
display:block;
height:120px;
padding:0px;
margin:0px;
}

.separateur img{
padding:0px;
margin:0px;
display:block;
height:1px;
}

Voila j'aimerais que l'image rollover reste lorsque je suis dans la zone du bloc marron et disparaisse bien entendu lorsque j'y sors.

Merci à tous
Modifié par Starvin (17 Dec 2010 - 17:04)

Hello,
J'ai regarder vite fait,
Essaie de rajouter ca:

#blocgauche dl:hover dt#chiffres  a { 
background: ... ;
}

par contre j'ai vu des trucs qui servent pas trop, faut faire le menage...

merci ça marche je vais faire le ménache !