Dynamic Menus – CSS Class – Sub-Menus

Hello,
I have built a dynamic nav using CSS (Suckerfish menus) and WordPress pages. I created an on-state using the WordPress current_page_item class to highlight the current page top-level menu item with a different color scheme. The problem is when the current page is loaded, all child pages (submenu items) appear in the “on” class as well. The CSS I’m using for the navs is below. The site can be viewed at https://64.37.110.105/Wordpress/?page_id=4. I’m happy with all aspects of the nav other than the current pages’ sub-menus. Any suggestions/ideas/tips on getting this to work correctly?

Thanks in advance for all replies.

All the best,
Sarah

#nav, #nav ul {
z-index: 5;
padding: 0;
margin: 0;
list-style: none;
white-space: nowrap;
background: #063;
width:770px;
}

#nav ul li {
float: left;
list-style: none;
padding: 0;
margin:0;
border-left: solid 2px #999;
}

#nav ul li a {
display: block;
font: bold 13px “Arial Narrow”, arial, sans-serif;
width:96px;
height:22px;
padding:4px 0 0 12px;
color: #CCC;
text-transform: uppercase;
text-decoration: none;
}

#nav ul li a:hover{
background: #9CF;
color: #069;
}

#nav ul li.current_page_item, #nav ul li.page_item current_page_item, #nav ul li.current_page_item a:hover, #nav ul li.page_item current_page_item a:hover{
color: #FFF;
background: #069;

}

#nav ul li ul {
position: absolute;
left: -999px;
padding: 0;
margin: 0;
background: #FFF;
width: 150px;

}

#nav ul li ul li {
padding: 0;
margin: 0;
border: none;
}

#nav ul li ul li a {
font: bold 11px tahoma, helvetica, sans-serif;
color: #063;
width: 150px;
padding: 3px 2px 2px 3px;
margin: 0;
background-color: #FFF;
height: 1.5em;
text-decoration: none;
text-transform: none;
border: solid 1px #063;
border-top: none;
}

#nav ul li.current_page_item ul li.page_item, #nav ul li.page_item current_page_item ul li.page_item{
color: #063;
background-color: #FFF;
}

#nav ul li ul li a:hover {
background-color: #9CF;
color: #069;
width: 150px;
padding: 3px 2px 2px 3px;
margin: 0;
}

#nav li:hover ul, #nav li.sfhover ul { left: auto; }

#nav li:hover ul { left: auto; }

#nav li:hover, #nav li.hover {position: static;
}