Single class for normal text & link / hover

[sridharr]

I want to define a single style class with a pre-defined text color, lets say Black. But when I hyperlink a part of the text content, it should take a different property and yet another when I hover on the link.

So far, what I have is

.main_menu {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: normal;
color: #000000;
text-transform: none;
}
.main_menu:link {
color: #CC0000;
text-decoration: none;
}
.main_menu:visited {
color: #CC0000;
text-decoration: none;
}
.main_menu:hover {
color: #0000FF;
text-decoration: none;
}


What I want is:
• Home • About Us • Portfolio • Contact •

Here, I don't have links on the bullet, hence they should be black. Since, I am going to hyperlink "Home", "About Us", etc., I want them to be colored Red and hover with Blue.

How can I do this with just one class?

Thanx,
Sridhar

[ronaldb66]

Specifiy the anchor element in the selectors to single out anchors:

.main_menu a {
...
color: #F00;
...
}

.main_menu a:hover {
...
color: #00F;
...
}

etc.

[sridharr]

Thanx Ronald. It works.

Sridhar