CSS Hover Links ???

[j4mes_bond25]

I wish to have links for the menu like this: http://www.tristarwebdesign.co.uk/templates/templates/karma/index.html

However, I wish to have MY OWN font style on each links as it can be seen on:

The only difference I want is that this guy has used "title" in order to display text on each "li" link, while I would like to use MY OWN font style instead as can be seen from my page on: http://members.lycos.co.uk/darsh25/Personal Website/contact.php

i.e. the font style that can be seen in links like About, Services, Owner, Template & Contact.

<li><a title="link six" href="index.html">link six</a></li>
<li><a title="link five" href="index.html">link five</a></li>
<li><a title="link four" href="index.html">link four</a></li>
<li><a title="link three" href="index.html">link three</a></li>
<li><a title="link two" href="index.html">link two</a></li>
<li><a title="link one" href="index.html">link one</a></li>

My links are saved as an "image" (both background & the text on it) & as far as I'm aware, I couldn't possibly "hover" EACH INDIVIDUAL image of EACH of these links using CSS, could I ???

I know that I could "hover" change the background colour, but then what about the text on it ??? Is it possible to use the same fancy font AND being able to change the background colour when hover to "grey" (just as it could be seen from the "tristar" website.

My CSS code so far is:

/* CSS Document */

body 
{
	background-color:black;
	background-attachment:fixed;
}

/* .................................... HEADER & FOOTER ................................... */

#header
{
	font-family:Georgia, "Times New Roman", Times, serif;
	color:white;
	text-align:center;
	width:100%; 
}

#header  a
{
	color:yellow;	
	text-decoration:none;
}

#header  a:hover
{
	text-decoration:underline;
}

#footer
{
	font-family:Georgia, "Times New Roman", Times, serif;
	color:white;
	text-align:center;
	border-top:3px solid fuchsia;
	float:left;
	background-color:black;
	width:100%; 
}

#footer a
{
	color:yellow;	
	text-decoration:none;
}

#footer a:hover
{
	text-decoration:underline;
}

/* ........................................ BANNER ........................................ */

#banner
{
	width:100%;
	border:none;
	text-align:center;
	background-color:none;
}

/* ......................................... TOP MENU .................................... */

#topMenu
{
	width:100%;
	float:right;
	border:none;
}

#topMenu ul
{
	float:left;
	margin-left:4%;
}

#topMenu ul li 
{
	display:inline;
	width:20%;
}


/* ................................... CONTENT ................................................ */

#leftContent
{
	float:left;
	width:10%;
	border:1px solid red;
	background-color:green;
}

#centerContent
{
	background-color:white;
	width:75%; 
	margin-left:1%;
	float:left;
	border:1px solid green;
}

#centerContent ul
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	list-style-type:decimal;
	color:black;
}

#centerContent li
{
	margin:3% 3%;
	line-height:1.5em;
}

#rightContent
{
	float:right;
	background-color:fuchsia;
	border:1px solid red;
	width:10%;
}

/* ................................... STYLES ......................................... */

p.first-letter:first-letter
{
	color:red;
	margin-left:5%;
	font-size:xx-large;
}

p
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	font-size:medium;
	line-height:1.5em;
	margin:2% 3%;
	color:black;
}

h4
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:center;
	font-size:x-large;
	color:green;
}

h5
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	font-size:medium;
	margin:2% 3%;
	color:blue;
}

h6
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	margin:0;
	font-size:medium;
	font-weight:normal;
	color:red;
}

.italic
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	color:black;
	font-style:italic;
}

.bold
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	color:black;
	font-weight:bold;
}

.colorTextRed
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	color:red;
}

.colorTextBlue
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	color:blue;
}

.colorTextGreen
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	color:green;
}

/* ................................... TABLE ......................................... */

#contactTable
{
	background-color:white;
	border-spacing:2%;
	margin:3% 3%;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:left;
}

#contactTable tr
{
	border:none;
}

#contactTable th
{
	color:fuchsia;
}

#contactTable td
{
	font-size:medium;
	color:black;
}

/* ................................... CLASSES ......................................... */

.table
{
	background-color:white;
	border-spacing:2%;
	margin:3% 3%;
	font-family:Georgia, "Times New Roman", Times, serif;
	border-collapse:collapse;
	text-align:left;
}

.tr
{
	border:none;
}

.td
{
	border:thin solid red;
	font-size:medium;
	padding:2px;
	text-align:center;
	color:black;
}

 

[StephanieCordray]

you're on the right track, however, you must specify again a color for the hover...

#header a:hover
{
just insert the color: here:
text-decoration:underline;
}

Now, if you want the image background change like that site, you have to make the images and call them up, too.