Pesquisar na Comunidade

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?