A way to change background color for parent list element

[jessekinsman]

I have an expandable drop-down list that uses a very basic Javascript function to hide and display. When the list is clicked on the submenu appears below the parent with a different background but I can't figure out a way to change the parent elements background color while its submenu is displayed.

I tried using the pseudo element visited to change the color but it won't change until an actual page has been loaded from that link and the only thing that <a href="#" onClick="Javascript:show();"> link is doing is triggering the javascript that makes the submenu visible.

Alright enough talking, here is the css that controls the color:
.vnav ul li a
{
color: #3C4D87;
}
.vnav ul li a:link
{
color: #FFF;
}
.vnav ul li a:visited
{
background-color: #D2CAA8;
color: #FFF;
}
.vnav ul li a:hover
{
background-color: #D2CAA8;
color: #fff;
}
ul li ul li a:hover
{
background color: #DCD8CE;
}


Here is the menu list:
<div class="vnav">
<ul>
<li><a href="../lean/index.html" onMouseover="javascript:show();"><big><strong>Skidoo (Lean)</strong></big></a>
</li>
</ul>

<ul>
<li><a href="#" onMouseover="javascript:show('smenu2');">menu 2</a> <!--this is the element I want to change color when the element below is displayed-->
<ul id="smenu2">
<li><a href="#"><span id="submenu">Sub1</span></a></li>
</ul>
</li>
<li><a href="three_right.html" onMouseover="javascript:show();">Right Column Tallest</a></li> <!--These will eventually have submenus but I just haven't gotten there yet-->
<li><a href="../index.html" onMouseover="javascript:show();">Middle Column Tallest</a></li>
<li><a href="three_short.html" onMouseover="javascript:show();">Short Content</a></li>
</ul>

</div>

Here is the show/hide javascript:

<script type="text/javascript">
window.onload=show;
function show(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
</script>


Thanks in advance for your help.
—J