Hi!
I have a menu with, in this case 3 submenus, but it could be more or less.
The submenus are hidden until a mainmenu item associated with the submenu is clicked. Then the appropriate submenu should become visible, also, I want the background of the clicked item to turn into the same grey color as the submenu. Whenever another item in the mainmenu is clicked the bgcolor should return to normal for and the submenu should be hidden again.
For this example say menu items 1,2&4 have submenus and the others have not.
If anyone is able to help me with this feature I would be really grateful.
Example code below!

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#mainnav{
position: absolute;
top: 20px;
/*left: 220px;*/
left: 30px;
color : #666666;
background-color: transparent;
padding: 0;
margin: 0;
border-top: 1px #666666 solid;
border-right: 1px #666666 solid;
border-bottom: 1px #666666 solid;
border-left: 0px #666666 solid;
white-space: nowrap;
}

#mainnav a{
/*display: block;*/
float: left;
text-align: left;
padding: 1px 5px 1px 5px;
margin: 0;
text-decoration: none;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 70%;
font-weight: normal;
color: #666666;
background-color: #FFFFFF;
border-top: 0px #666666 solid;
border-right: 0px #666666 solid;
border-bottom: 0px #666666 solid;
border-left: 1px #666666 solid;
white-space: nowrap;
}

#mainnav a:hover{
color: #666666;
background-color: #88DD00;
}
..subnav{
position: absolute;
top: 36px;
left: 30px;
color : #666666;
background-color: #CDCDCD;
padding: 0;
margin: 0;
border-top: 1px #666666 solid;
border-right: 1px #666666 solid;
border-bottom: 1px #666666 solid;
border-left: 0px #666666 solid;
white-space: nowrap;
}

..subnav a{
/*display: block;*/
float: left;
text-align: left;
padding: 1px 5px 1px 5px;
margin: 0;
text-decoration: none;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 70%;
font-weight: normal;
color: #666666;
background-color: #CDCDCD;
border-top: 0px #666666 solid;
border-right: 0px #666666 solid;
border-bottom: 0px #666666 solid;
border-left: 1px #666666 solid;
white-space: nowrap;
}

..subnav a:hover{
color: #666666;
background-color: #88DD00;
}
</style>
</head>

<body>
<div id="mainnav">
<a href="#" id="link1">link1</a>
<a href="#" target="_self"id="link2">link2</a>
<a href="#" id="link3">link3</a>
<a href="#" id="link4">link4</a>
<a href="#" id="link5">link5</a>
<a href="#" id="link6">link6</a>
<a href="#" id="link7">link7</a>
</div>


<div id="subnav1" class="subnav" style="display:none">
<a href="#" id="subLink1">subLink1.1</a>
<a href="#" id="subLink2">subLink1.2</a>
<a href="#" id="subLink3">subLink1.3</a>
</div>

<div id="subnav2" class="subnav" style="display:none">
<a href="#" id="subLink1">subLink2.1</a>
<a href="#" id="subLink2">subLink2.2</a>
<a href="#" id="subLink3">subLink2.3</a>
</div>

<div id="subnav3" class="subnav" style="display:none">
<a href="#" id="subLink1">subLink3.1</a>
<a href="#" id="subLink2">subLink3.2</a>
<a href="#" id="subLink3">subLink3.3</a>
</div>
</body>
</html>