Custom menu styling

Question

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?

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.

Example:

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

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