Ora vorrei far si che cambi il colore del div mainMenu...

onClick:
a) primo click: mostra il sottomenu e cambia colore.
b) secondo click: nascondi sottomenu e ripristna colore.

onMouseOver e onMouseOut:
se non c'è click, allora camba il colore.


Ho associato le seguenti funzioni al MENU 2... ma non funziona...
se qualcuno puà dare un occhiata, Grazie.



<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

//over
function checkColor2(aDiv) {
if (aDiv.style.backgroundColor=="cccccc"){
aDiv.style.backgroundColor="95B1FF";
}else{
if (aDiv.style.backgroundColor=="ffffff"){
aDiv.style.backgroundColor="ffffff";
}
}
}

//out
function checkColor3(aDiv) {
if (aDiv.style.backgroundColor=="FFFFFF"){
aDiv.style.backgroundColor="FFFFFF";
}else{
if (aDiv.style.backgroundColor=="95B1FF"){
aDiv.style.backgroundColor="cccccc";
}
}
}
//click
function checkColor1(aDiv) {
if (aDiv.style.backgroundColor=="95B1FF"){
aDiv.style.backgroundColor="95B1FF";
}else{
if (aDiv.style.backgroundColor=="cccccc"){
aDiv.style.backgroundColor="95B1FF";
}
}
}

function showHide(aDiv) {
aDiv.className = aDiv.className == "hideit" ? "shown" : "hideit";

}
//-->
</script>
<style type="text/css">
<!--
.hideit {display:none; background-color: 3E1818}
.shown {display:block}
.mainMenu {color:black;background-color:cccccc;font-size:9pt;font-family:arial;cursor:hand}
.subMenu {color:navy;background-color:white;font-style:none;font-size:9pt;font-family:verdana;cursor:hand}
-->
</style>
</head>
<body bgcolor="#FFFFFF" vlink="01166F" alink="01166F">
<table width="99%" border="0" cellspacing="0" cellpadding="1" align="center">
<tr>
<td height="1" width="1"></td>
<td height="10"></td>
</tr>
<tr>
<td height="0" width="1"></td>
<td><span class="testoNews">MENU</span><span class="testoTitolo"></span></td>
</tr>
<tr>
<td height="0" width="1"></td>
<td>
<div style="width:195px;height:18px" class="mainMenu" onMouseOver="this.style.backgroundColor='95B1FF'" onMouseOut="this.style.backgroundColor='cccccc'" onClick="showHide(document.getElementById('subMenu 1'))">
<div align="left">menu 1</div>
</div>
<div id="subMenu1" class="hideit">
<div style="width:195px;height:18px" class="subMenu" onMouseOver="this.style.backgroundColor='95B1FF'" onMouseOut="this.style.backgroundColor='white'">
ciaociao</div>
<div style="width:195px;height:18px" class="subMenu" onMouseOver="this.style.backgroundColor='95B1FF'" onMouseOut="this.style.backgroundColor='white'">
come va</div>
<div style="width:195px;height:18px" class="subMenu" onMouseOver="this.style.backgroundColor='95B1FF'" onMouseOut="this.style.backgroundColor='white'">
tutto bene</div>
</div>
<div id="main2" style="width:195px;height:18px" class="mainMenu" onMouseOver="checkColor2(document.getElementById(' main2'))" onMouseOut="checkColor3(document.getElementById('m ain2'))" onClick="checkColor1(document.getElementById('main 2'));showHide(document.getElementById('subMenu2')) ;return true">
<div align="left">menu 2</div>
</div>
<div id="subMenu2" class="hideit">
<div style="width:195px;height:18px" class="subMenu" onMouseOver="this.style.backgroundColor='95B1FF'" onMouseOut="this.style.backgroundColor='white'">
ciao1</div>
<div style="width:195px;height:18px" class="subMenu" onMouseOver="this.style.backgroundColor='95B1FF'" onMouseOut="this.style.backgroundColor='white'">
ciao2</div>
</div>
</td>
</tr>
</table>
<div align="center"></div>
</body>
</html>