Probleme foncton Javascript

Bonjour,
Je vous expose mon problème, j'ai un fichier html comme ceci :

...
<div id="menuprincipal">
    <div id="menu1">hgbk</div>
    <div id="menu2">hdbj</div>
    <div id="menu3">daek</div>
    <div id="menu4">hdbj</div>
</div>
...

et un fichier javascript attaché à cette page :

window.onload = test;

function test(){
	
	var menus = document.getElementById("menuprincipal").getElementsByTagName("div");

	for(i=0; i<4; i++){
		menus[i].onmouseover = survole;
		menus[i].onmouseout = nonsurvole;
	}
}

function survole() {
	this.style.background="#EC7414";
}

function nonsurvole() {
	this.style.background="#473D3E";
}

Au final il n'y à que le premier qui change de background, pourquoi ? et comment faire pour que les 4 change de background au mouseover ?

Merci d'avance