Hide visibility of a menu under an image

HTML & CSS
1

I am trying to style a menu under an image but have it hidden. I am using some code from another page on our website and cannot figure out what one of the attributes means. The issue is with the a after the second #standardsmenu and with the a i to make the menu invisible in the third #standardsmenu. I’ve searched google for an i and/or an a attribute and can only come up with the idea of pseudo-classes. Any ideas?

#standardsmenu {
background-color: #EFF0EC;
background-image: url(/images/StandardsPyramid.png);
background-repeat:no-repeat;
height: 498px;
width: 750px;
position: relative;
}

#standardsmenu a {
position: absolute;
height: 30px;
width: 30px;
text-decoration: none;
}

#standardsmenu a i {
visibility: hidden;
}

2

Hello upwithalyssa,

Welcome to SitePoint.

This is why CSS cannot be simply “copied” from another page it must correspond to your mark up. the “a i” part you are referring to is NOT an attribute it’s a selector and would correspond to any <i> within the <a> tag with the element with the ID of “standardsmenu”. My guess is that this CSS is intended to hide the visibility of TEXT ( not image) for markup that would look like this:

<ul id="standardsmenu">
 <li><a href="#"><i>some link</i></a></li>
 <li><a href="#"><i>some link</i></a></li>
 <li><a href="#"><i>some link</i></a></li>
</ul>

This technique has it’s own accessibility and SEO issues. But it not used to hide menus ( as in drop downs) just merely the text ( as in image replacement)

I was not exactly clear in what your actually trying to do overall and you didn’t post your HTML mark up but i hope this helps somehow.

3

Hi dresen_phoenix,
Thanks for your suggestion. I was able to work out what needed to be done. Yes, you were correct in that I wanted to hide the text. The i was an old reference to italics so I just removed that. It wasn’t needed. Your suggestion to make a list was useful too. Thanks for taking the time to answer my plea!