Изменить плагин jQuery меню Superfish

Я пытаюсь сделать так, чтобы superfish отображал меню, чтобы каждый столбец меню имел набор CSS, который позволит мне присвоить каждому столбцу меню различные атрибуты CSS. т.е. другой цвет текста, другой цвет фона, цвет при наведении.

Например, меню может быть

Home | About Us:Meet the Team:Why Hire Us | Contact Us:Social Media | Our Services

Где «О нас» имеет два пункта подменю, а «Свяжитесь с нами» — один пункт подменю.

Я хотел бы добавить к ним стили, чтобы .imMenu-Primary1... imMenu-PrimaryN находился в каждом элементе основного меню и его дочерних элементах. Кроме того, я хотел бы добавить к каждому из своих детей что-то вроде этого .imMenu-Childof-Primary1.... imMenu-Childof-PrimaryN. Или что-то подобное, что позволило бы мне стилизовать каждый пункт основного меню и его дочерние элементы как группу.

Ниже приведен файл Superfish, который я считаю актуальным.

Заранее благодарю вас за ваше время и усилия,

Тим

P.S. Я использую Wordpress для создания меню и не могу или, скорее, не знаю, как пройтись по структуре меню в Wordpress, чтобы таким образом добавить css. Тем не менее, я заметил, что суперподпрограммы обходят древовидную структуру меню, и я уверен, что можно добавить атрибуты css с помощью javascript. Вот почему я предложил сделать это именно так. Однако, если есть лучший способ сделать это, я все уши. Еще раз спасибо.

;(function($){ // $ will refer to jQuery within this closure

$.fn.supersubs = function(options){
    var opts = $.extend({}, $.fn.supersubs.defaults, options);
    // return original object to support chaining
    return this.each(function() {
        // cache selections
        var $$ = $(this);
        // support metadata
        var o = $.meta ? $.extend({}, opts, $$.data()) : opts;
        // cache all ul elements and show them in preparation for measurements
        $ULs = $$.find('ul').show();
        // get the font size of menu.
        // .css('fontSize') returns various results cross-browser, so measure an em dash instead
        var fontsize = $('<li id="menu-fontsize">&#8212;</li>').css({
            'padding' : 0,
            'position' : 'absolute',
            'top' : '-999em',
            'width' : 'auto'
        }).appendTo($$)[0].clientWidth; //clientWidth is faster than .width()
        // remove em dash
        $('#menu-fontsize').remove();
        // loop through each ul in menu
        $ULs.each(function(i) { 
            // cache this ul
            var $ul = $(this);
            // get all (li) children of this ul
            var $LIs = $ul.children();
            // get all anchor grand-children
            var $As = $LIs.children('a');
            // force content to one line and save current float property
            var liFloat = $LIs.css('white-space','nowrap').css('float');
            // remove width restrictions and floats so elements remain vertically stacked
            $ul.add($LIs).add($As).css({
                'float' : 'none',
                'width' : 'auto'
            });
            // this ul will now be shrink-wrapped to longest li due to position:absolute
            // so save its width as ems.
            var emWidth = $ul[0].clientWidth / fontsize;
            // add more width to ensure lines don't turn over at certain sizes in various browsers
            emWidth += o.extraWidth;
            // restrict to at least minWidth and at most maxWidth
            if (emWidth > o.maxWidth)       { emWidth = o.maxWidth; }
            else if (emWidth < o.minWidth)  { emWidth = o.minWidth; }
            emWidth += 'em';
            // set ul to width in ems
            $ul.css('width',emWidth);
            // restore li floats to avoid IE bugs
            // set li width to full width of this ul
            // revert white-space to normal
            $LIs.css({
                'float' : liFloat,
                'width' : '100%',
                'white-space' : 'normal'
            })
            // update offset position of descendant ul to reflect new width of parent.
            // set it to 100% in case it isn't already set to this in the CSS
            .each(function(){
                var $childUl = $(this).children('ul');
                var offsetDirection = $childUl.css('left') !== undefined ? 'left' : 'right';
                $childUl.css(offsetDirection,'100%');
            });
        }).hide();

    });
};
// expose defaults
$.fn.supersubs.defaults = {
    minWidth        : 9,        // requires em unit.
    maxWidth        : 25,       // requires em unit.
    extraWidth      : 0         // extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off     values
    };

})(jQuery);