CSS rule problem please help...

[oneminstrel]

Here is the link to one of my problem pages:http://riveroffaithnow.com/Sermons.html
When you scroll over an MP3 link, the text color is white(hover tag). When I try to edit it, the menu hover tag also changes. I'm having a senior moment, How do I edit my CSS to split these two up? can anyone help me with this?
Thanks
Robert

Here's my CSS:

* {
margin: 0;
padding: 0;
height: auto;
}
body {
font-family: Tahoma, Veranda Helvetica, sans-serif;
font-size: .75em;
color:#000;
background: #EBEBEA;
margin: 0 auto;
width:770px
}
a {
color: #FFFFFF
}
a:hover {
color: #ffffff;
margin: 0px;
white-space: normal;
font-family: Tahoma, Verdana;
}
.whitetext { color: #fff; text-decoration: none }

#headerLogo {
background: url(images/header-bg.gif) repeat-x;
border: 1px solid #7F9DB9;
height:110px;
font-size: 140%;
color: #C26E00;
font-weight: bolder;
}
.form {
font-size: 90%;
color: #000;
height: 14px;
width:130px;
}
.nav-bar-left {
background: url(images/left-nav.gif) repeat-y;
width:215px;
color: #fff;
padding-top:20px;
font-size: 12px;
text-align: left;
}
.table { background:#7F9DB9 }
.joinUs-border, .columns {
background: #fff;
border: 1px solid #7F9DB9;
width:183px;
font-size: 90%;

padding: 7px;
color:#000
}
.joinUsheader {
font-weight:bold;
color:#fff;
width:169px;
height:25px;
padding-left:8px;
background-image: url(images/joinus-bg.gif);
background-repeat: no-repeat;
}

.interiorBg {
background: #fff;
border: 1px solid #7F9DB9;
font-size: 90%;
padding: 7px;
color:#000
}
#navigation {width:168px; font-size:12px;}
#navigation ul {margin:0px; padding:0px; background-color:#7F9DB9;}
#navigation ul li {
height:25px;
line-height:25px;
list-style:none;
padding-left:10px;
color:#FFF;
border-top:#fff solid;
border-bottom:#fff solid;
border-width:1px;
cursorointer;
}
#navigation {
width:168px;
font-size:12px;
color: #ffffff;
}
#navigation ul {margin:0px; padding:0px; background-color:#7F9DB9;}
#navigation ul li {
height:25px;
line-height:25px;
list-style:none;
padding-left:10px;
color:#FFF;
border-top:#fff solid;
border-bottom:#fff solid;
border-width:1px;
cursorointer;
}
#navigation ul li:hover {
color: #FFFFFF;
background-color:#C26E00;
position:relative;

}
#navigation ul ul {
display:none;
position:absolute;
left:75px;
top:5px;
border:#fff solid;
border-width:1px;
background-color:#002EB8;
}
#navigation ul li:hover ul {display:block;}
#navigation ul ul li {border:none; width:150px; float:left; display:inline;}
#navigation ul ul li:hover {text-decoration:underline; border:none;}

.copyright { color: #333; font-size:85% }
.smtext { font-size:70%; font-weight:normal }
h3 { font-size: 130%; font-weight: bold; color: #252F33 }

[wvpv]

firebug is your friend.

if you want to change the hover on those specific links add this to your CSS:

.style16:hover {
color:black; /*or whatever color*/
}

or you can take the class="style16" off of those links.

[oneminstrel]

Thanks WVPV. That took care of it.....