0

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?

Jay
  • 168
  • 4
  • 1
    Make your .sub-menu li a more specific or add important! in front of that style. – SVS Jul 01 '12 at 13:20
  • well, that was simple and obvious. Thanks. You want to make that an answer so I can accept it? – Jay Jul 01 '12 at 13:28

1 Answers1

2

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; }
SVS
  • 4,245
  • 1
  • 23
  • 28