[Résolu] Hover sur div pour en faire appraitre un autre

Bonjour

je souhaite faire apparaitre un div carré avec un texte au centre (Majeur1), placé sur ma page en absolue et qu'au survole de ce div, un autre div, positionné par rapport à lui apparaisse.

j'ai codé ceci

<div id="pagePrems">
  <div id="Majeur1" class="niveau1"><span><br /><br /><br />Majeur1</span>
    <div id="SOUSmajeur1" class="niveau2"><div><span>blabla</span></div>
  </div>
</div>

avec

#pagePrems{position:relative;}

#Majeur1{
	top : 25px;
	left : 54px;
	position:absolute;
	width: 150px;
	height : 150px;	
	background-color : red ;
	z-index: 30;
	text-align: center;
	color : #ffffff;
	font-size: 18px;
	display: block; 
}


#SOUSmajeur1{
	position:absolute;
	width: 300px;
	height : 300px;	
	top : 10px;
	left : 120px;
	background-color : green ;
	z-index: 20;
	text-align: center;
	font-size: 13px;
}

.niveau2{
	display: none;
}

.niveau1 :hover .niveau2 {
	display: block; 
}

.niveau1 :hover  {
	background-color : black ;
}

Le hover fait n'importe quoi
Sous firefox, le background passe en noir que sur le survole du texte contenu dans Majeur1 et seul le background du texte change.
Sous IE ça fait pareil mais avec en prime le texte qui se décale et sautille d'une ligne vers le haut ! (à cause des vilains br /> ???)

Dans tous les cas, ces hover ne déclenchent jamais l'action .niveau1 :hover .niveau2 {display: block; }

Merci par avance pour votre déblocage

Merci, ca tourne !