Problems styling for multiple superfish menus in stripped down theme using a menu ID

In order to simplify css styling problems (there are many!) I have defined a sandbox site using a Stark sub-theme and have created an empty superfish style (called matmenu2 in the code below). The work page has three superfish menus, main, navigation and topic. This code reflects efforts to style topic independent oof the other two. Having gotten approximately what I wanted, I then applied the ID $superfish-3 to the css expecting to isolate the style for just that one menu. Instead, when I add the ID , some styles don't work. One is the application of a red arrow to replace the generic black one.

Here is a typical Drupal Cascade for the superfish 'topic' menu *(note the ID in the first line and the class in the last) :

    <ul id="superfish-3" class="menu sf-menu sf-menu-materials sf-vertical sf-style-MatMenu2 sf-total-items-23 sf-parent-items-22 sf-single-items-1 superfish-processed sf-js-enabled sf-shadow">
      <li id="menu-899-3" class="first odd sf-item-1 sf-depth-1 sf-no-children">
        <li id="menu-900-3" class="middle even sf-item-2 sf-depth-1 sf-total-children-8 sf-parent-children-0 sf-single-children-8 menuparent">
         <a class="sf-depth-1 menuparent sf-with-ul" title="FRUIT" href="/specs/03">
           FRUIT
             <span class="sf-sub-indicator"> »</span>
         </a>

There is a default menu arrow image comes from superfish.css defined in the css:

.sf-sub-indicator {
     background-image: url('../images/arrows-black.png'); 
    }

and I want to change the file from a black arrow to a red one and have created the appropriate .png file. Its css is:

#superfish-3 .sf-sub-indicator {
     background-image: url('../images/arrows-red.png'); 
    }

When I display the page, the arrows are not changed and firebug tells me that the original style is used. I thought an ID scores higher than a class. How do I express the selector to have it supersede the generic black one?

I have several other styling features such as a border that also fail if I add an ID. I know that borders don't pass on in inheritance, but inheritance is moving from the .sf-sub-indicator to #superfish-3 .sf-sub-indicator, so I would assume my red arrows would show, but the don't. This is specifically related to adding the ID, but only for certain style settings. For instance my link color is green and I change it to red for this ID. That works fine.

How do I isolate separate menu appearances, if not by ID's?