CSS question

I'm trying to style an HTML page using CSS.

I have 2 different link styles but I cannot get them independent of each other.

In my case, the styling for the footer links overrides every other link style, even though I have tried to differentiate them.

I know this is a basic question but I just cannot wrap my head around it.

[HTML]<div id="nav">
<ul class="menu">
<li class="mainmenu"><a href="#">Home</a></li>
<li class="mainmenu"><a href="#">Privacy</a></li>
<li class="mainmenu"><a href="#">Ethics</a></li>
<li class="mainmenu"><a href="#">Cases</a></li>
<li class="mainmenu"><a href="#">Contact</a></li>
</ul>
</div>
<div id="footer">
<ul class="footmenu">
<li class="bottommenu"><a href="#">Home</a></li>
<li class="bottommenu"><a href="#">Ethics</a></li>
<li class="bottommenu"><a href="#">Privacy</a></li>
<li class="bottommenu"><a href="#">Cases</a></li>
<li class="bottommenu"><a href="#">Contact</a></li>
</ul>
</div>
[/HTML]

.mainmenu a:link, a:visited {
    display: block;
    float: left;
    width: 100px;
    margin-left: 40px;
    min-height: 40px;
    font-weight:bold;
    text-align: center;
    padding-top: 20px;
    color:#A9B0B3;
    background-color:#3A415A;
    text-decoration: none;
}

.mainmenu a:hover, a:active {
    background-color: #566981;
}

.footmenu a:link, a:visited {
    color: #34344E;
    text-align: center;
    text-decoration: none;
}

.footmenu a:hover, a:active {
    color: #CBDAD5;
}