Superfish Active Color

Take a look at my site themeforward.com/demo2. When I hover over a menu item with a sub-menu, like ‘Templates’, and mouse over sub-menu items the background color stays the same as it should but the hover color of the text does not. I do the background color with the following css and tried to add the font color here to no avail.

Does anybody know how to make the font color remain the same while scrolling through the sub-menu? Help would be greatly appreciated!

The background color is achieved with this CSS, but the font color is not behaving in the same manner:

.sf-menu > li:hover, .sf-menu > li.sfHover,
.sf-menu > li a:focus, .sf-menu > li a:hover, .sf-menu > li a:active {
    background:     #CFDEFF;
    color:          #222;
    outline:        0;
}

The full CSS:

.sf-menu {
    z-index: 900;
    font-size:13px
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    padding: 5px 10px;
    color:          #FFF;
    text-decoration:none
}
.sf-menu li {
    margin:20px 0 0 20px;
    z-index: 900
}
.sf-menu li li {
    z-index: 900;
    margin:0;
    padding:0;
    background:#DDD;
}
.sf-menu li li li {
    background:     #DDD;
    margin:0;
    z-index: 900
}
.sf-menu > li:hover, .sf-menu > li.sfHover,
.sf-menu > li a:focus, .sf-menu > li a:hover, .sf-menu > li a:active {
    background:     #CFDEFF;
    color:          #222;
    outline:        0;
}

.sf-menu .current-post-ancestor a, .sf-menu .current-menu parent a, .sf-menu .current-page-ancestor a, .sf-menf .current-category-ancestor a, .sf-menu .active_category a, .sf-menu .current-menu-item a { color:#000 }

ul .sub-menu { border:1px solid #DCDCDC }
ul li .sub-menu a { color:#666!important; font-weight:normal; font-size:11px; padding:5px!important }
.sf-menu > li li:hover, .sf-menu > li li.sfHover,
.sf-menu > li li a:focus, .sf-menu > li li a:hover, .sf-menu > li li a:active {
    background: #EEE
}