Função para mudar cor de um elemento.

Tenho um menu em que ao passar o mouse sobre cada elemento, ele altera a cor de uma div invisível logo abaixo.

Por exemplo:

Menu normal:

Menu ao passar o mouse em uma categoria:

e

Para tal, eu desenvolvi o seguinte código em js com os eventos onmouseover e onmouseleave em minhas categorias:

<script type="text/javascript">
 function mudaCor1() {
 var cor = 'red';
 document.getElementById('div1').style.backgroundColor = cor;
 }

 function mudaCor2() {
 var cor = 'red';
 document.getElementById('div1').style.backgroundColor = cor;
 }

 function mudaCor3() {
 var cor = 'green';
 document.getElementById('div1').style.backgroundColor = cor;
 }

 function mudaCor4() {
 var cor = 'black';
 document.getElementById('div1').style.backgroundColor = cor;
 }

 function mudaCor5() {
 var cor = 'orange';
 document.getElementById('div1').style.backgroundColor = cor;
 }

 function mudaCor6() {
 var cor = 'brown';
 document.getElementById('div1').style.backgroundColor = cor;
 }

 function mudaCor7() {
 var cor = 'yellow';
 document.getElementById('div1').style.backgroundColor = cor;
 }

 function mudaCor8() {
 var cor = 'pink';
 document.getElementById('div1').style.backgroundColor = cor;
 }

 function mudaCor9() {
 var cor = 'purple';
 document.getElementById('div1').style.backgroundColor = cor;
 }

 function mudaCor10() {
 var cor = 'grey';
 document.getElementById('div1').style.backgroundColor = cor;
 }

 function devolvecor() {
 var cor = 'white';
 document.getElementById('div1').style.backgroundColor = cor;
 }
 </script>

	 

	Gostaria de lhes perguntar. Existe uma outra maneira mais simplificada com menos códigos para desenvolver a mesma funcionalidade?