I'm trying to style a custom menu here so that I can let other people manage this site alongside myself.

What I'm trying to do is remove the text for the top level links while leaving the a as a block so the links are clickable, however when I try and remove the text using text-indent: -999em; (which I know isn't the neatest way of doing it) it recurses down the menu and hides all the the other links.

Can anyone suggest any neat ways of hiding the text?

1 Answer 1


I think you can use the text-indent for this level, but you must set the text-indent for all a -tags of the class sub-menu also set to 0, not -999px.


#menu-main-navigation .link-experience a {
display: block;
height: 63px;
width: 167px;
text-indent: -999px;

.sub-menu a {
text-indent: 0px !important;
  • It didn't work at first but I used Firebug and noticed that the .sub-menu a was being overwritten by the #menu-main-navigation's text-indent, so I gave the sub-menu an !important and it seems to have worked! Commented Aug 23, 2011 at 13:30
  • the fastest variant is to use the !important element
    – bueltge
    Commented Aug 23, 2011 at 14:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.