Superfish font color on pathclass

Superfish font color on pathclass

Hello. I am relatively new to the superfish menu plugin, and I am trying to set up a menu for our site at http://dev.jonesmedia.biz . My intention is to set up the menu in the following way:

1. The active class in the first-level menu will contain dark text on a light background. The default class, (assigned using the pathclass attribute) is called "startopen", and should also be displayed as dark text on a light background.

2. The second level menu should contain the same dark text and the same light background.

3. When an item is moused over, it should change the background color to a slightly different shade.

I have items 2 and 3 working correctly, and 1 seems "close". The problem is that when the page first loads, the startopen class (the "News" category) is not displaying dark-colored text. I would appreciate any help anyone can provide.

The css code can be found at http://dev.jonesmedia.biz/js/superfish/css/superfish.css and http://dev.jonesmedia.biz/js/superfish/css/superfish-navbar.css .

Following is what I think is the relevant css.


/* line 3 */
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    color: inherit ; /* Used so that browser inherits css color from li tags and classes */
}

*/line 26 */
.sf-menu ul li {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 11px;
    background: #ffffff;
    color: #446644 !important;
}

/* line 74 */
.sf-menu a, .sf-menu a:visited {
        border-left:    1px solid #fff;
        padding:                .75em .5em;
        text-decoration:none;
        color: #ffffff;
}
.sf-menu li li a {
        color: #446644 !important;
}
.sf-menu li {
        color: #446644 !important;
}
.sf-menu li li {
        color: #446644 !important;
        background-color: #bbeebb;
}
.sf-menu li li li {
}

.sf-menu li:hover, .sf-menu a:hover {
        color: #446644 !important;
        background-color: #88ee88 !important;
}

.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
        outline:                0;
        color: #446644 !important;
        background-color: #bbeebb;
}

.startopen a {
        color: #446644 !important;
}