Trouble with CSS Hover and Active

Trouble with CSS Hover and Active

I'm working on a project for my intro to web design class and I've hit a
wall. I'm trying to change the image of the button when its on hover and
active, currently it will show the button but when you go to hover over it
doesn't change, I've tried giving the buttons there own id as well as just
replacing the current image with another but it doesn't work.
html:
<div id="navcontainer" class="column five">
<ul id="navmain">
<li><a href="index.html" id="home">Home</a></li>
<li><a href="philosophy.html" id="btnphil">Philosophy</a></li>
<li><a href="econews.html" id="btnnews">Eco News</a></li>
<li><a href="diy.html" id="btndiy">DIY</a></li>
<li><a href="takeaction.html" id="btntake">Take Action
</a></li> </ul>
</div><!-- .sidebar#sideLeft -->



CSS:
#navcontainer{
padding:10px 30px;
width:220px;
float: left;
margin-top:480px;
}
#navmain li{
list-style:none;
}
#navmain li, #navmain a{
text-decoration:none;
height:38px;
width:153px;
background-image: url('../images/button.png') ;
background-position: center;
text-align: center;
color:#000;
margin-left:-10px;
margin-top:20px;
vertical-align: -22%;
#navmain, #home a:hover {
text-decoration:none;
height:38px;
width:153px;
background-image: url('../images/buttonhover.png') ;
background-position: center;
text-align: center;
color:#000;
margin-left:-10px;
margin-top:20px;;}
}
#navmain a:active {
border-top-color: #297ab0;
background: #297ab0;
}