[jQuery] Superfish - Different colors for each menu column

I'm trying to come up with an approach to assign a different color scheme for 
each main group (column).

ie:
<ul class="sf-menu sf-vertical">
   <li>
         # Menu1 
   </li>        
   <li class="red" >
       #a Menu2 
         <ul >
            <li class="red">
                 #aa Menu2-subitem1 
            </li>
           <li class="red">
                 #aa Menu2-subitem2 
            </li>
          </ul >
    </li>
</ul>               

and 

Superfish.css is:

.
.
.
.sf-menu li {
        background:             #BDD2FF;
}
.sf-menu li.green {
        background:             #00AA00;
        }
.sf-menu li.red {
        background:             #AA0000;
        }

.sf-menu li li {
        background:             #AABDE6;
}
.sf-menu li li.green {
        background:             #00AA00;
}
.sf-menu li li li {
        background:             #9AAEDB;
}

BUT HOW DO I use class of green or red here?
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
        background:             #CFDEFF;
        outline:                0;
}
                

--------------------
Any help is appreciated


-- 
View this message in context: 
http://old.nabble.com/Superfish---Different-colors-for-each-menu-column-tp27252875s27240p27252875.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.