Hello all! Thanks in advance =D

I've been working on a menu for a WordPress powered site and I have this annoying little problem...

When you're on a page in the primary menu's submenu... the current page's link is highlited with the hover text color, and that's perfect. But when you're on a page that is on the top level of the primary menu, a parent link, it's the highlighted color AND all the links on the submenu for the parent link, are too. They shouldn't be. Here's the code, and you can see it live on christmaspress.com

 #main-nav {
  height: 45px;
  margin: 0 0 10px;
     width:998px;
      background:url(./images/nav-bar-purple.png) 0 0 no-repeat;
 }
 #main-nav ul {
  margin: 0; padding: 0;
 }
 #main-nav li {
  display: block;
  float: left;
  line-height: 45px;
  height: 45px;
  margin: 0; padding: 0;
  position: relative;
 }
 #main-nav li a {
  display: block;
  height: 45px;
  line-height: 45px;
  padding: 0 15px;
      color:#ffffff;
 }
 #main-nav .current-menu-item a {
  color:#aaffff
  }
  
 #main-nav a:hover {
  color: #aaffff;
  }
  
 #main-nav .current_page_item a { 
 color:#aaffff;
  }
 #main-nav ul ul { /* this targets all sub menus */
  display: none;
  position: absolute;
  top: 45px;
      background:url(./images/nav-bar-purple.png) 0 0 no-repeat;
 }
 #main-nav ul ul li { 
 float: none;
  width: 240px;
 }
 #main-nav ul ul li a { 
 padding: 5px 10px; 
     color:#ffffff;
      background:url(./images/nav-bar-purple.png) 0 0 no-repeat;
 }
 
#main-nav ul li:hover > ul {
  display: block;
  color:#ffffff;
 }