Take the 2-minute tour ×

Here is a typical Drupal Cascade for a superfish 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">
         <span class="sf-sub-indicator"> »</span>

There is a default menu arrow image 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?

ADDED CONTENT: 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.

ADDED MORE: I created a class at the <li> level and it works. There is something about having the ID or something about the classes that come between the ID and the link (?).

share|improve this question
check your spelling? You've got the right idea for specificity, so something else must be going wrong. –  zzzzBov Feb 1 '12 at 19:24
This came about when I added the ID to the generic version in my local.css. These same codes without the ID displayed the red arrow image. Now the display is coming from a superfish.css lower on the food chain. –  Ashlar Feb 1 '12 at 19:29
add comment

3 Answers

Just go up the tree one level:

a .sf-sub-indicator {...
share|improve this answer
ah yeah, good call. –  Kevin Cogill Feb 1 '12 at 19:27
I tried it as a .sf-sub-indicator and as a > .sf-sub-indicator. Both failed. –  Ashlar Feb 1 '12 at 19:34
Ok, kick it harder with: "body .sf-sub-indicator" –  Diodeus Feb 1 '12 at 19:36
add comment

Stop guessing at it. Any browser's dev tools will be able to tell you what styles are in effect and what styles are being overridden. IE's "Trace Styles" tab is particularly useful for this task:

IE Dev Tools - Trace Styles

Select the element in question and expand the appropriate CSS attribute. You'll see each matching selector that defines that style. Then, make your selector stronger than the strongest selector.

share|improve this answer
sounds like he's already done that with firebug, and he's made his selector stronger than the strongest a bunch of different ways (including trying the nuclear hack option of !important). there's got to be something he's not seeing... that we can't help find without access to the staging site. ashlar, are you able to save a redacted static copy somewhere public, just so we can replicate the issue on our ends? –  Kevin Cogill Feb 1 '12 at 22:53
I'm not sure how to save a redacted static copy. Can you steer me to something that explains what and how? –  Ashlar Feb 1 '12 at 23:16
@Gilly, I have firebug and can see whats running my page, just why the CSS is being ignored. –  Ashlar Feb 1 '12 at 23:20
@Ashlar - Post a screenshot of firebug with the .sf-sub-indicator element selected. –  gilly3 Feb 2 '12 at 0:25
add comment

yeah the html/css looks sound. weird. well, you could always just do:

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

if you don't mind a little hackery.

share|improve this answer
No! Using !important is usually just an act of confusion, desparation, or both, and inevitably makes matters worse. –  gilly3 Feb 1 '12 at 19:27
Adding !important did not help either? –  Ashlar Feb 1 '12 at 19:41
what it usually is has no bearing on its validity as a solution. but if !important didn't help, you've got something weird going on. looks like the other more proper solutions didn't help either. do you have a live link we can see? –  Kevin Cogill Feb 1 '12 at 19:50
NO, its a sandbox where I am developing a Drupal Site. Some style settings such as borders do not inherit, is a background image one of them? –  Ashlar Feb 1 '12 at 19:56
is your red class lower in the css load order than the black one? if none of these solutions have worked, then it must be something really dumb (happens to all of us). –  Kevin Cogill Feb 1 '12 at 20:24
show 1 more comment

Your Answer


