text-indent inheriting in superfish children

Question

I'm trying to replace the top-level navigation of my site with images instead of text. I have this so far, which hides the text off-screen and puts up the image for a specific menu item.

#menu-item-982 a { background: url('image.png'); text-indent: -9999px; }

The problem is that, as a result, the submenu items in superfish, which don't have their own individual images but are just regular text menu items, are inheriting the text-indent property.

Using the following didn't reset the children text-indent.

.sub-menu li a { text-indent: 0px; }

In short, how can I use images on the top level of a superfish menu while using text menus for the second- and third-level fly-outs?

Answer 1

Try making your .sub-menu li a more specific

Here is a great post about specificity : http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Or

Try using important! for that css property

.sub-menu li a { text-indent: 0px !important; }