CSS rollover menu (Please help)

Dear friends,

I need a CSS help. I want to make a CSS simple rollover menu with text link from a image.

Here is the image:


Important: It is better to separate the text from image (I need them as text not image but when I will take mouse over a icon or text then both the text & icon will change color, see 'home' icon)

You can edit the image to make CSS rollover menu form one image (I think you have to join some copy of this image together)

Thanks in advance

 

You might "view source" and use firebug to "examine" http://www.venikom.com menu.

Here are essential segments:

<ul>
	<li id="selected"><a id="about" href="/aboutus/"><span>About us</span></a></li>
	<li><a id="portfolio" href="/portfolio/"><span>Portfolio</span></a></li>
	<li><a id="quote" href="/proposal/"><span>Request Quote</span></a></li>
	<li><a id="contact" href="/contact/"><span>Contact</span></a></li>
</ul>

Code (markup):

Then, with CSS you can set background images. Google "CSS sprites".

 

This is very true. You have an image as one and then the other image as a hover/active in the CSS. As for splitting them up you may wish to have a look at Adobe Fireworks as that program does this without much hassle.

 

Ya, you can do this by coding css for both menu text and image.