Vertical CSS menu not displaying child items

[pjohnstone]

Hi all,

I am a bit stumped on this one. I am building a site in Wordpress and I have my primary navigation at the top which works fine.

I also have a left sided navigation bar on selected areas of the site. Within these menus there are a number of parent - child menu strutures.

The problem I have is that when I click on the parent item the child items appear, but once the page is loaded they then vanish. I can solve it by make the parent page and anchor # and it works, but I need to put information on these parent pages.

So ideally what I want is that when you are on either the parent or child pages then the menu structure stays like this:

Our Services
Oncology
Emergency

etc and does not fold back in.

Here is a link:

Our Services | Vets Now Referrals

Here is the CSS for this menu:

ul {
margin: 0;
padding: 0;
list-style: none
}

ul li {
position: relative;
}
/* keep folowing styles together..........................*/
* html ul ul {
margin-left:-16px;/* ie5 fix */
voice-family: "\"}\"";
voice-family: inherit;
}
* html ul li {float:left;/* hide float from ie5*/}
* html ul ul {
width:150px;
w\idth:220px;
voice-family: "\"}\"";
voice-family: inherit;
}
* html ul ul {margin-left:0;/* hide margin from ie5*/}


/* keep above styles together .............*/

#side-nav{
background-color: #D81939;
-moz-border-radius: 10px;
border-radius: 10px;
}

#side-nav li ul {
position: relative;
display:none;
}
#side-nav li ul li {
width:220px
}

/* Styles for Menu Items */
#side-nav ul li a {
display:block;
text-decoration: none;
color: #FFF; /* IE6 Bug */
line-height:4em;
height:4em;
padding:0 5px;
font-size: 13px;
background-image: url(images/left-menu-line.jpg);
background-position: center bottom;
background-repeat: no-repeat;
}
#side-nav li li a {
background-color: #7A0E21;
background-image: url(images/left-menu-line-SUB.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}

/* set dropdown to default */
#side-nav li:hover li a, #side-nav li.over li a {
color: #FFF;
background-color: #7A0E21;
}

/* this sets all hovered lists to red */
#side-nav li a:hover,
#side-nav li:hover a, #nav li.over a,
#side-nav li:hover li a:hover, li.over li a:hover {
color: #000;
}

#side-nav li ul li { } /* Sub Menu Styles */
#side-nav li.on ul { display:block } /* The magic */
#side-nav li.off ul{display:none}

Also here is where it is called in the wordpress template


<div id="vet-navigation-area">
<div id="side-nav">

<?php
wp_nav_menu(array(
'theme_location' => 'glasgow-vets',
'menu_id' => 'nav',
'child_of' => '$PARENT'
));
?>


</div>
</div>

Any help would be fantastic.

Thanks