CSS rollover nav combining html text w/ graphic

Please see link below:
www(dot)f7digitaldesign(dot)com/isaac/index-test.html

Notice the secondary nav below the picture on the right. What I want to do is keep the grey subheads as html text and have them go red on hover but I also want a little red graphic to pop on next to the red text on hover (like shown on the first one "Apparel Design"-but it would only be there on hover). I can't think of a way to set this up w/o making all the navigation pure images, any ideas how to do this? Is it even possible?

Thanks!
F7Brian

fairly simple. Set your navbar header text to "display:block" in your css. Then use the pseudo selector ":hover" to set the different state with the graphic and the different color.

I didn't look at your code so you'll have to adjust this to what works for you, but it would basically look like this:



That should at least get you on the right track.

Thanks! I didn't try your suggestion, but got this one from another forum and it worked:

One way to do that is to put that image in each of your h3 tags and add this to your CSS:
Code:
.content h3 img {
display:none;
}
.content h3:hover img{
display:inline;
}

Another way is to do a similar thing but use the image as a background image.

The (tiny) problem with both of these is that some older browsers won't be able to handle the :hover on the h3 tag. Modern browsers should be OK.

I hope that helps.

So I did the first suggestion and its working.

thanks!

If you're worried about older browsers, you could use javascript instead.

older browsers do support hover on an anchor tag (<a>) so use mindfulsilence's solution. Its almost exactly the same except it requires a lot less markup and is more likely to work across a lot of browsers.